使用div对齐元素

Question

i have my form and it looks like this

<form>
<fieldset>
name:textbox
lastname:textbox
address:textbox
</fieldset>
</form>

and i want my page to align its elements like

<form>
<fieldset>
name:      textbox
lastname:  textbox
address:   textbox
</fieldset>
</form>

i am just using divs is there any other way to achieve this other than using tables?i need to align this elements to give my page a better navigation of inputs.

Answer 1

Use the table-related CSS display values to style block elements as though they were in a table:

display: table
display: table-row
display: table-cell

This will cause your block elements to behave as though they were <table> , <tr> , and <td> elements respectively.

Answer 2

Yes, it's possible just to use divs. Also, I'd use <input> so the user can actually type something in for your inputs.

HTML

<div>

name: <input type="text" />
lastname:  <input type="text" /> 
address:  <input type="text" /> 

</div>

CSS

input { 
  display: block;
}

http://jsfiddle.net/XzSGd/

Answer 3

<form>
<fieldset>
<label>name:</label>      textbox
<label>lastname:</label>  textbox
<label>address:</label>   textbox
</fieldset>
</form>

If you use an additional tag around, you can set the css to be as follows:

label {
   display: inline-block;
   width: 100px; //whatever width suits you
}

This way, all the labels will be the same width and, as long as the text is shorter than that, they will make the textboxes align.

Answer 4

You could use classes for the labels. See code below

HTML

<form>
<fieldset>
<span class="label">name:</span>   textbox
<span class="label">lastname:</span>  textbox
<span class="label">address:</span>  textbox
</fieldset>
</form>

CSS

.label{
display:inline-block;
width:150px;
}

*Change the width according to your need.

Answer 5

This is how I would do it. Float everything. Each textbox/label combo gets its own div, which makes it easy to apply a responsive design framework. Make this as narrow as you want by styling the fieldset. Obviously(?) you would want to include names for each input, and for-attributes for the labels.

http://jsfiddle.net/s3jn3/

input {
    float: right;
    margin-top: 0.5em;
}

label {
    float: left;
}

fieldset>div {
    clear: both;
}

<fieldset>
    <div>
        <label>Item A</label>
        <input type="text" />
    </div>
    <div>
        <label>Item B</label>
        <input type="text" />
    </div>
    <div>
        <label>Item C</label>
        <input type="text" />
    </div>
</fieldset>

Answer 6

Try to put it in table, like so:

<form>
<fieldset>
<table>
<tr><td align="left">name:</td>      <td>textbox</td>
<tr><td align="left">lastname:</td> <td> textbox</td>
<tr><td align="left">address:</td>  <td>textbox</td>
</table>
</fieldset>
</form>