帮助将此表转换为div和css

Question

这让我疯了。我怎样才能达到与下表相同的效果，但是使用div和css。

<table>
    <tr>
        <td><label>label1</label></td>
        <td>foo</td>
    </tr>
    <tr>
        <td><label>label2</label></td>
        <td>bar</td>
    </tr>
</table>

修改

如果foo或bar是长段，则它们不应在标签列

下流动

Answer 1

固定宽度，浮动标签是一种方式：

<p>
    <label style="width: 100px; float: left;">Label 1</label> Foo
</p>

<p>
    <label style="width: 100px; float: left;">Label 2</label> Bar
</p>

您也可以丢弃float属性并使用display：inline-block代替，但请注意IE6。

Answer 2

<div style="width: 30%;">
   <div style="float: right;">
      <div>
          foo 
      </div>
      <div>
          bar
      </div>
   </div>

   <div style="float: left;">
      <div> 
         <label>label1</label>
      </div>
      <div>
         <label>label2</label>
      </div>
   </div>
</div>

您可以在此处查看输出：http://jsfiddle.net/Y7XZx/

Answer 3

HTML：

<ul>
    <li>
        <label> Label1 </label>
        Foo
    </li>
    <li>
        <label> Label2 </label>
        Bar
    </li>
</ul>

CSS：

label {
    display:inline-block;
    width:100px;
}

---

现场演示： http://jsfiddle.net/RFhur/1/

---

样式化现场演示： http://jsfiddle.net/RFhur/2/

---

Answer 4

以下是一个有效的例子：http://jsfiddle.net/59GqN/。

它完全矫枉过正，但似乎有效。 （如果我花了超过20分钟的时间来弄清楚如何让它在没有它们的情况下工作，我会使用表格。但是，不促进它们用于网站布局，但是放弃了对它的讨厌表）。

祝你好运！