目前我有以下 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/
这将是一个快速的解决方法。您应该将.tipdiv 和输入都放入包装 div 中。
您根本不需要明确的宽度，也不需要表格；只需使用 CSS 表（请参阅我对这个相关问题的回答）：
form { display: table; }
p { display: table-row; }
label { display: table-cell; }
input { display: table-cell; }
<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/
好吧，要么你使用 a <table>，在一个单元格中放入 ，<label>然后在另一个单元格中<input>，或者你使用固定的宽度/边距或填充。
在此解决方案中，您使用表格来保存表单。一列用于标签，另一列用于输入。在这种情况下，您将在输入列中有提示，它会自动与输入对齐。
这有利于您的标签/输入的灵活尺寸。并且表并不总是邪恶的。请记住，如果您想让标签与输入保持一致，vertical-align:top请在 CSS 中添加一个。
在此解决方案中，您为标签提供固定宽度，并使用.tip或移动div 。marginpaddingleft
这将使您的布局保持在适当的位置，因此请注意极长的标签！
您可以为标签设置固定大小。比使用标签大小将 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>
而结果。
你去： http: //jsfiddle.net/4sJ2t/ 你只需要给你的标签一个固定的宽度，然后你的小费左边距
label {width:100px; text-align:right; margin-right:5px;}
.tip {margin-left:105px; padding: 5px 0;}
你可以给 a height，label给width父母div和float你的tip. 查看演示：http: //jsfiddle.net/pEJMD/4/