幫助將此錶轉換爲div和css

這讓我瘋狂。我怎麼能達到像下面的表格一樣的效果，但與div和css。幫助將此錶轉換爲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或酒吧，他們不應該在標籤欄下流動

來源

2011-02-11 raklos

表格有什麼問題...... – Blender 2011-02-11 23:54:22

從語義上講，您使用LABEL的目的是什麼？它是一種形式嗎？ – mark123 2011-02-12 00:02:53

@Blender我開始懷疑同樣的事情grr！ – raklos 2011-02-12 01:05:19

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/

來源

2011-02-12 00:36:23

固定寬度長的段落，浮動標籤是單向的：

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

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

你也可以丟棄浮動屬性，並使用display：inline-block代替，但要注意IE6。

來源

2011-02-11 23:50:51 claviska

怎麼樣CSS中的流體寬度標籤？假設標籤文本是數據庫驅動的。如果標籤沒有包裝線並且「Foo」仍然與「酒吧」垂直對齊，那將是理想的。 – Asaph 2011-02-11 23:52:59

<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/

來源

2011-02-11 23:52:35

這裏有一個工作示例：http://jsfiddle.net/59GqN/。 Foobar is foobar

這是完全矯枉過正，但它似乎工作。（如果我花了超過20分鐘的時間來弄清楚如何讓它在沒有它們的情況下工作，我會使用表格。但是我做而不是將它們提升爲網站佈局，但是放棄了討厭的表格）。

祝你好運！

來源

2011-02-12 01:23:41 Blender

幫助將此錶轉換爲div和css

回答

相關問題