使用div对齐元素

Question

我有我的表格，它看起来像这样

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

我希望我的页面对齐其元素，例如

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

我只是使用div，除了使用表格外，还有其他方法可以实现此目的吗？我需要对齐此元素以使页面更好地导航输入。

Answer 1

使用与表相关的CSS显示值来对块元素进行样式设置，就像它们在表中一样：

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

这将导致您的块元素的行为就像分别是<table> ， <tr>和<td>元素一样。

Answer 2

是的，可以只使用div。 另外，我将使用<input>以便用户可以实际输入内容。

的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>

如果在周围使用其他标签，则可以将css设置如下：

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

这样，所有标签将具有相同的宽度，并且只要文本短于该宽度，它们将使文本框对齐。

Answer 4

您可以使用标签类。 见下面的代码

的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;
}

*根据需要更改宽度。

Answer 5

这就是我要做的。 漂浮一切。 每个文本框/标签组合都有其自己的div，这使应用响应式设计框架变得容易。 通过设置字段集的样式使其尽可能窄。 显然（？），您希望为每个输入都包括名称，并为标签提供for属性。

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

尝试将其放在表格中，如下所示：

<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>