显示：表格，行不水平

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 也是垂直对齐的

旧：

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

更新： 不使用表格标签的原因是“语义网”。我们选择标签的依据是它们的含义，而不是表现形式。在这种情况下，表格标签不适合，因为表格标签用于表格数据，而不是布局。演示应该是 Css 角色