-1

I was trying to display my form using the table layout. The rest button is not level with the submit button and I'm not sure how to go about fixing this.

Any help would be much appreciated, thanks!

CSS:

body
{
    display:table
}

col1,col2
{
    display:table-cell;
}

http://jsfiddle.net/uhqAX/

4

1 回答 1

2

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 角色

于 2013-07-05T12:58:12.627 回答