使用 CSS 对齐表单域答案

【问题标题】：Aligning form fields using CSS使用 CSS 对齐表单域
【发布时间】：2015-05-01 15:35:25
【问题描述】：

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

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

【问题讨论】：

标签： css forms drupal alignment inline

【解决方案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>

【讨论】：

由于这是公认的答案，您应该更新您的 html 以具有有效的结束标签。我不希望有人将您的答案粘贴到他们的编辑器中，结果比他们开始时更加困惑。
感谢您的回复，我已编辑结束标签。

【解决方案2】：

你可以做以下任何一件事情：

用两列创建一个<table>，而不是你的<fieldset>。

将<label> 元素放在第一列，<input/> 元素放在第二列。该表格将自动将列宽与该列中的最大元素对齐。

或

您可以将其添加到您的 css 中：

fieldset.search-advanced label{
    min-width:200px;
}

【讨论】：

【解决方案3】：

谢谢，Thi Tran 和 FactoryAidan。将尝试自定义 Drupal 的 webform tpl。但是您的答案肯定会在自定义模板时派上用场。

这是我找到的资源的链接 - http://cgit.drupalcode.org/webform/tree/THEMING.txt?id=HEAD

【讨论】：