css - 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);
}

私が得ている出力は次のとおりです。

なぜこの奇妙な動作ですか？

最初の行は正しく整理されているように見えますが、テーブルセルの要素は左右に完全に整列していません。2 行目は、何が起こっているのかわかりません。

私はテーブルでこれらすべてのことを行っていたので、div を使用するのは初めてです。

Answer 1

フロートは必要ありません。インライン スタイルの 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;
}