使用 CSS 对齐表单域

Question

我在 Dupal 7 中有一个高级搜索表单（单击 "Advanced search"）- http://www.ibuild.ph/mtf-rdp-minimal/search/node and contact form here - http://www.ibuild.ph/mtf-rdp-minimal/contact。搜索字段是内联的，而联系字段位于标签下方。

有没有办法在不将文本标签和表单字段分隔在两个 div 中的情况下，将字段与文本标签内联定位并使字段彼此垂直对齐？

Answer 1

您可以执行以下任一操作：

制作一个包含两列的 <table> 而不是您的 <fieldset>。

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

或

您可以将此添加到您的 css:

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

Answer 2

使用table

您可以通过更改 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>

Answer 3

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

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

使用 CSS 对齐表单域

Aligning form fields using CSS

css

forms

drupal

alignment

inline