CODEWITHSUNDEEP
htmlcss
Sylvia585
Sylvia585

Reputation: 301

How do I align my label to the left of my text input box with CSS?

I'm new to all of this so I have a question and it's probably silly but here we go anyway.

I have this HTML for a form but I need to use CSS to align my labels to the left of the text box and not have it sit on top. I don't know what CSS to use in order to do this. 

<form action="process.php">
    <h1>Registration</h1>
    <ol>
        <li>
            <label for="name">Name:</label>
<input type>"text" id="name" name="name">
        </li>
    </ol>
</form>

There are three more "labels" like this in my ol but I don't feel like typing them all out.

I need the labels to the left aligned with my text boxes.

I have tried:

label{display:inline-block}

And:

label ol{display:inline-block}

I've tried giving floats, the text book (yes this is for a college class) says to do this:

.label{
    display:inline-block;
}

But that doesn't seem to work either. Please tell me how on earth I can do this.

Here is my exact CSS so far:

h1{font-family:Oregano;}

form{margin-bottom:1em;}

form ol{list-style-type:none;}

form li{width:100px;
border:1px solid black;
text-align:right;
background-color:black;
color:white;
margin:20px;
height:20px;
white-space:5px;}

It looks exactly like it should, I just have an issue with the alignment of the labels. Have I mentioned how much I hate this crap? I'm changing my major! (not really... but still)

Upvotes: 0

Views: 7018

Answers (3)

dippas
dippas

Reputation: 60573

Are you looking for something like this? If so, then no CSS is needed.

<ol>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
  <li>
    <label for="name">Name:</label>
    <input type="text" value="some text" />
  </li>
</ol>

So using your updated CSS here is a Solution:

form {
  margin-bottom: 1em;
}
form ol {
  list-style-type: none;
}
form li {
  margin: 20px;
  height: 20px;
  white-space: 5px;
}
form label {
  width: 100px;
  border: 1px solid black;
  text-align: right;
  background-color: black;
  color: white;
}
<form>
  <ol>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
    <li>
      <label for="name">Name:</label>
      <input type="text" value="some text" />
    </li>
  </ol>
</form>

Upvotes: 1

izorgor
izorgor

Reputation: 138

If you check your example: 

<form action="process.php">
<h1>Registration</h1>
<ol>
<li>
<label for="name">Name:</label>
<input type="text" id="name" />
    </li>
    </ol>
</form>

you will see that its like you want by default.

So it must be a problem in some CSS rule that gives display block to the input or label tag (or both)

Try this:

label, input {display:inline-block !important}

"!important" at the end is there just in case you need to override some other rule.

Upvotes: 0

divoom12
divoom12

Reputation: 812

Both the label and the input must me inline/inline-block

label, input{
    display:inline-block;
}

They of course must be next to each other, with the label on the left side in your case.

Btw: it's not a good idea to have labels & inputs inside li elements

Upvotes: 0

Related Questions