CSS:
body
{
display:table
}
div.row
{
display:table-row;
}
div.cell
{
display:table-cell;
}
HTML:
<div class="row">
<div class="cell">
<label for="Username">Username</label>
</div>
<div class="cell">
<input data-val="true" data-val-length="The Username must be at least 5 characters long." data-val-length-max="10" data-val-length-min="5" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="Password">Password</label>
</div>
<div class="cell">
<input data-val="true" data-val-length="The Password must be at least 4 characters long." data-val-length-max="10" data-val-length-min="4" data-val-required="The Password field is required." id="Password" name="Password" type="text" value="" />
</div>
</div>
<div class="row">
<div class="cell">
<input id="resetButton" type="reset" value="Reset" runat="server"/>
</div>
<div class="cell">
<input id="submitButton" type="submit" value="Submit" runat="server"/>
</div>
</div>
您使用表格布局的方式不正确。您的代码实际上只有 2 个单元格,并且您用于<br/>
创建新行,这不是表格布局的工作方式。
检查演示。在这个演示中,如果你注意到,你会看到文本UserName, Password
也是垂直对齐的
老的:
我想知道为什么在这种情况下你不使用表格标签。你应该知道使用display:table
, display:table-row
,display:table-cell
存在浏览器兼容性问题(并非所有浏览器都支持)
更新:
不使用表格标签的原因是“语义网”。我们选择标签的依据是它们的含义,而不是表现形式。在这种情况下,表格标签不适合,因为表格标签用于表格数据,而不是布局。演示应该是 Css 角色