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