css - 使用 CSS 对齐表单域

Question

我在 Dupal 7 中有一个高级搜索表单(单击“高级搜索”)- http://www.ibuild.ph/mtf-rdp-minimal/search/node和联系表格 - http://www.ibuild.ph/mtf-rdp-minimal/contact .搜索字段是内联的，而联系字段位于标签下方。

有没有办法用文本标签内联定位字段并使字段彼此垂直对齐，而无需将文本标签和表单字段分开在两个 div 中？

Answer 1

使用表格

您可以通过更改 width: 100px;

来更改标签的宽度

<table style="width: 100%;">
<colgroup>
    <col style="width: 100px;">
    <col>
<colgroup>
<tr>
    <td>Name</td>
    <td><input type="text" /></td>
</tr>
  
<tr>
    <td>Address</td>
    <td><input type="text" /></td>
</tr>
  
</table>

使用最小宽度:

<div>
  <label style="display: inline-block; min-width: 100px;">Name: </label><input type="text" />  
</div>
    
<div>
  <label style="display: inline-block; min-width: 100px;">Address: </label><input type="text" />  
</div>