Css float无法正确对齐div元素

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>

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方面是新手，因为我曾经在表中处理所有这些事情，所以如果缺少一些琐碎的东西，请原谅。

如果您决定将div元素显示为表，为什么要使用div元素？ 您可以尝试以下方法：

流量ID
[默认值：32]


交通等级
[默认值：0]


#包装纸{
宽度：600px；
列表样式：无；
}
.细胞{
浮动：左；
}

不需要浮动，并且您在其中一种内联样式中也有一个输入错误：

宽度：10%，浮动：右应
宽度：10%；浮动：对

这就是它的工作原理：

以下是您应该如何使用代码：

下面是一个HTML表格版本：
1。为什么要使用CSS表，而HTML表是很好的2。浮动的原因是什么？如果您试图显示一个表布局，您应该使用元素。我不会说“应该”，因为使用基于CSS的表有很多原因。只是在这种情况下似乎没有。如果您试图做的是一个表，那么表也不错：
li
标记肯定不适合于表行。这不是一个很好的解决方案，而且您缺少一个开始和结束UL标记。为什么li不适合？我见过许多高质量的网站使用列表元素进行此类操作。此外，div而不是ul也不是什么大问题，因为两者都使用
display:block
。看看我的JSFIDLE，它工作得很好，没有使用div作为表元素。我真的看不出
比
有什么用？我把它改成
是为了考虑你的反对意见。
<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;
}