float不能正确对齐div元素

Question

HTML：

  <div class="table" style="display:table;width:600px">
      <div style="display:table-row">

         <div style="width:30%;float:left;display:table-cell">Flow ID</div> 
         <div style="width:60%;float:right;display:table-cell">
             <input type="text" name="flowid" size="20" id="flowid"/>
         </div> 
         <div style="width:10%,float:right;display:table-cell">  [Default : 32] </div>
      </div>

      <div style="display:table-row">
          <div style="width:30%;float:left;display:table-cell">Traffic Class</div>
          <div style="width:60%;float:right;display:table-cell">
              <input type="text" name="traffic" size="20" id="traffic"/> 
          </div>          
          <div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
      </div>
  </div>

CSS：

div.table {
 font: 81.25%/1 arial,helvetica,sans-serif;
 font-weight:bold;
 background-color:rgb(241,241,241);
 margin: 0 auto;
 width: 50%;
 text-align:center;
 border-width: 1px 1px 1px 1px;
 border-style: solid;
 border-color: rgb(229, 229, 229);
}

我得到的输出是：

为什么这种奇怪的行为？

Althoguh第一行似乎是正确组织的，但仍然表格单元格元素没有完全对齐左右。对于第二行，我不知道发生了什么？

我是使用div的新手，因为我曾经用桌子做所有这些事情所以请原谅我是否遗漏了一些微不足道的东西。

Answer 1

不需要浮动，你也有一个内联样式的拼写错误：

width:10%,float:right;应为width:10%;float:right;。

这是工作： http://jsfiddle.net/sQ4Nb/

以下是您应该如何获得代码： http://jsfiddle.net/cS35y/

这是一个HTML表格版本： http://jsfiddle.net/53fKu/

Answer 2

如果您决定将它们像桌子一样显示，为什么要使用div元素？ 您可以尝试这样的事情：jsfiddle

<ul id="wrapper">
    <li>
        <div style="width:30%;" class="cell">Flow ID</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="flowid" size="20" id="flowid" />
        </div>
        <div style="width:15%;" class="cell">[Default : 32]</div>
    </li>
    <li>
        <div style="width:30%;" class="cell">Traffic Class</div>
        <div style="width:55%;" class="cell">
            <input type="text" name="traffic" size="20" id="traffic" />
        </div>
        <div style="width:15%;" class="cell">[Default : 0]</div>
    </li>
</ul>

#wrapper {
    width: 600px;
    list-style: none;
}
.cell {
    float: left;
}