Question

我在Dupal 7中有一个高级搜索表单（点击＆＃34;高级搜索＆＃34;） - http://www.ibuild.ph/mtf-rdp-minimal/search/node并在此处联系表单 - http://www.ibuild.ph/mtf-rdp-minimal/contact。搜索字段是内联的，而联系人字段位于标签下方。

是否有办法使用文本标签内联字段并使字段彼此垂直对齐，而不将两个div中的文本标签和表单字段分开？

Answer 1

使用表格

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

使用 min-width：

<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 2

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

使用两列而不是<table>制作<fieldset>。

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

OR

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

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

Answer 3

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

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

使用CSS对齐表单字段

3 个答案: