在兩個單獨的塊中顯示名稱和值

Question

在下面的'Rome'下面的html出現在第二行的'Place'下面，我該如何防止？

http://jsfiddle.net/JqxTx/21/

謝謝， 克里斯。

Answer 1

你既可以用hanging line indent或CSS3 columns去，但對於後者，你我們不得不做一些調查，看他們在這種情況下是否有用。

我通常與舊式去

<table> 
    <tr> 
     <td><label>Label</label></td> 
     <td><span>Text</span></td> 
    </tr> 
</table> 

，因爲它很簡單，它的作品，雖然有一點點多餘的代碼，它不提倡嵌套，這不是什麼大不了的爛攤子。 我仍然無法看到這個佈局方案的任何好的，簡單的等效CSS替換。 最好的一個可能是要麼

<label style="float: left; width: 20%;">Label</label> 
<span style="float: left; width: 80%;">Text</span> 

或

<label style="position: absolute; width: 20%;">Label</label> 
<span style="display:block; padding-left: 20%;">Text</span> 

你也許可以找到更多here或the answer to this question。 但他們不如桌子好，因爲他們不適應第一列的內容。

黑客喜歡

<label style="float:left; height: 2em;">Label</label> 
<span>Text</span> 

或

<label style="display:block; float:left;">Label</label> 
<span style="display:block; float:left; width:90%;">Text</span> 

工作，但我不會推薦它們，因爲它們都依賴於特定的屏幕尺寸。

G'luck。

Answer 2

我會改變span到一個塊級元素，如p然後風格像

div label { 
    float: left; 
} 
div p { 
    margin-left: 40px;  
} 

• DEMO

Answer 3

http://jsfiddle.net/paislee/JqxTx/22/ 認爲這將工作，因爲我把它分成兩塊。

Answer 4

只需使用一個表：

<table><tr valign=top><td>Place <td>Rome Rome ... Rome</table> 

你可能有多個名稱/值對，然後他們成爲優秀的表。