Question

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

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

我想让我的页面像

那样对齐它的元素

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

我只是使用divs除了使用表之外还有其他任何方法来实现这一点吗？我需要对齐这些元素，以便为我的页面提供更好的输入导航。

Answer 1

使用与表相关的CSS display values来设置块元素的样式，就像它们在表中一样：

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

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>

使用div对齐元素

6 个答案: