0

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 的新手，因为我曾经用表格做所有这些事情，所以如果遗漏了一些琐碎的事情，请原谅。

4

2 回答 2

2

不需要浮点数，并且您在其中一种内联样式中也有错字：

width:10%,float:right;应该是width:10%;float:right;。

这是它的工作原理：http: //jsfiddle.net/sQ4Nb/

这里是你应该有你的代码：http: //jsfiddle.net/cS35y/

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

于 2013-02-19T20:40:47.853 回答
-1

如果您决定像表格一样显示 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;
}
于 2013-02-19T20:25:22.770 回答