CODEWITHSUNDEEP
htmlcss
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10287

How can I get text inputs to align without using an HTML table?

I need to have a set (several "rows") of label/text input elements. I want the text input elements to vertically align without using an HTML table. It would seem setting all the labels to a great enough width should do this, but this does not work:

HTML

<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
</br>
<label>Date</label>
<input type="text" id="date"></input>

CSS

label {
    font-family: Consolas, 'Segoe UI', sans-serif;
    margin-left: 10px;
    min-width: 120px;
}

jsfiddle at http://jsfiddle.net/clayshannon/8wRT3/1/

Upvotes: 3

Views: 100

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Use a styled unordered list as a container to manage spacing.

ul, li { margin:0;padding:0;list-style:none } //add margins to adjust spacing
li { clear:both }

Use labels with float:left + display:block + width: or display:inline-block + width:.

<ul>
   <li><label>...</label> <input.... /></li>
   ...
</ul>

See: http://alistapart.com/article/prettyaccessibleforms

Upvotes: 4

Lance
Lance

Reputation: 4820

Firstly, on your jsFiddle, "//" isn't correct procedure for commenting out CSS code. What you should do is this:

HTML

<label>Invoice #</label>
<input type="text" id="invoiceNumber"></input>
<div style="clear:both;"></div>
<label>Date</label>
<input type="text" id="date"></input>

CSS: Change the input to this:

input {
    float:right;
}

If you want them more to the left, then adjust the margin-left property. http://jsfiddle.net/8wRT3/6/

Upvotes: 1

Related Questions