css - 显示 :table, 行不水平

Question

我试图使用表格布局来显示我的表单。休息按钮与提交按钮不在同一水平线上，我不确定如何解决这个问题。

非常感谢任何帮助，谢谢!

CSS:

body
{
    display:table
}

col1,col2
{
    display:table-cell;
}

http://jsfiddle.net/uhqAX/

Answer 1

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/>创建新行，这不是表格布局的工作方式。

检查 demo .在此演示中，如果您注意到，您会看到文本 UserName, Password也是垂直对齐的

旧:

我想知道你为什么不在这种情况下使用表格标签。你应该知道使用 display:table , display:table-row , display:table-cell浏览器兼容性有问题(不是所有浏览器都支持)

更新:不使用表格标签的原因是“语义网”。我们根据标签的含义而不是外观来选择标签。在这种情况下，table 标签不适合，因为 table 标签用于表格数据，而不是用于布局。 Presentation 应该是 Css Angular 色