CSS

Question

目前我有以下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/

Answer 1

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

Answer 2

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

解决方案1：表

Table solution

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

专业适用于标签/输入的灵活尺寸。并且表并不总是邪恶的。请记住，如果您想让标签与输入保持一致，请在CSS中添加vertical-align:top。

解决方案2：固定宽度

Fixed-width solution

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

这样可以保持你的布局，所以要小心很长的标签！

Answer 3

您可以为标签设置固定大小。然后使用标签的大小将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。

Answer 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/

Answer 5

使用margin-left：

更改：

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

要

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

DEMO

详细了解CSS margin属性here.

Answer 6

您可以向height提供label，向width父div和float tip提供{{1}}。请参阅演示：http://jsfiddle.net/pEJMD/4/

Answer 7

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

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

如何将div与表单字段对齐？

7 个答案:

解决方案1：表

解决方案2：固定宽度

CSS

HTML