【问题标题】：How align div to a form field?如何将 div 与表单域对齐？
【发布时间】：2013-02-21 06:31:30
【问题描述】：

目前我有以下 HTML 代码。

            <div class="field">
            <label>E-mail address: </label>
            <input type="text" id="email" name='email' style="width:200px;"></input>
            <span class='warning' id="emailWarning" > </span>
            <div class="tip" id="emailTip"></div>

        </div>

但是，我希望 div 元素 (class= 'tip') 中的文本与表单文本字段的开头对齐。我应该如何使用 HTML 和 CSS 做到这一点？

这是现在的样子： http://jsfiddle.net/pEJMD/embedded/result/

【问题讨论】：

标签： html css forms alignment field

【解决方案1】：

This 将是一个快速的解决方法。您应该将.tip div 和输入都放入一个包装 div。

【讨论】：

谢谢.. 我最终使用了这个。我认为这将是一种更好的方法，而不是硬编码以像素为单位的值以将 'tip' div 向右“移动”..（如其他答案中所建议）

【解决方案2】：

您可以为标签设置固定大小。比按标签大小将 div 向右推：

<div class="field">
   <label style="width:100px;">E-mail address: </label>
   <input type="text" id="email" name='email' style="width:200px;"></input>
   <span class='warning' id="emailWarning" > </span>
   <div class="tip" id="emailTip" style="margin-left:100px;">
      The quick brown fox jumps over the lazy dog
   </div>
</div>

还有result。

【讨论】：

【解决方案3】：

好吧，要么使用<table>，将<label> 放入一个单元格，将<input> 放入另一个单元格，要么使用固定宽度/边距或填充。

解决方案 1：表格

Table solution

在此解决方案中，您使用表格来保存表单。一列用于标签，另一列用于输入。在这种情况下，您将在输入列中有提示，它会自动与输入对齐。

这有 pro 可以为您的标签/输入提供灵活的尺寸。 桌子并不总是邪恶的。请记住，如果您想让标签与输入保持一致，请在 CSS 中添加 vertical-align:top。

解决方案 2：固定宽度

Fixed-width solution

在此解决方案中，您为标签指定固定宽度，并使用 margin、padding 或 left 移动 .tip div。

这将使您的布局保持在适当的位置，因此请注意过长的标签！

【讨论】：

谢谢..这是一个很好的答案。我不喜欢使用表格，因为根据 w3schools 的说法，表格仅用于显示表格数据。我会坚持另一种方法。 :)

【解决方案4】：

您根本不需要明确的宽度，也不需要表格；只需使用 CSS 表格（请参阅我对 this related question 的回答）：

CSS

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

HTML

<form>
    <p>
        <label for="a">Short label:</label>
        <input id="a" type="text">
    </p>
    <p>
        <label for="b">Very very very long label:</label>
        <input id="b" type="text">
    </p>
</form>

这是一个 JSFiddle：http://jsfiddle.net/DaS39/1/

如果您需要右对齐标签，只需将text-align: right 添加到标签：http://jsfiddle.net/DaS39/

【讨论】：

【解决方案5】：

使用margin-left:

更改：

<div class="tip" id="emailTip">

收件人：

<div class="tip" id="emailTip" style="margin-left:95px;">

DEMO

详细了解 CSS margin 属性 here.

【讨论】：

【解决方案6】：

您可以将height 提供给label，将width 提供给父div 和float 您的tip。查看演示：http://jsfiddle.net/pEJMD/4/

【讨论】：

嘿-我也想到了这个，但它是如此肮脏，肮脏的黑客=）
我想最终证明手段是合理的...... :)

【解决方案7】：

给你：http://jsfiddle.net/4sJ2t/ 你只需要给你的标签一个固定的宽度，然后你的小费左边距

label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}

【讨论】：