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存在浏览器兼容性问题（并非所有浏览器都支持）

<强>更新不使用表标签的原因是“语义网”。我们根据其含义选择标签，而不是通过演示。在这种情况下，表标记不适合，因为表标记用于表格数据，而不是布局。演示文稿应该是Css角色

display：table，rows not level

1 个答案: