如何對齊2行與第2行縮進CSS？

Question

假設我有兩條這樣的線。

Some Label: First element 
      Second element 

第二行是縮進的，以便它與First元素對齊。

這可以通過表格輕鬆完成。

<table> 
    <tr> 
    <td rowspan="2">Some Label:</td> 
    </tr> 
    <tr> 
    <td>First element</td> 
    <td>Second element</td> 
    </tr> 
</table> 

但我不想用於對齊。

<div> 
    <span>Some Label:</span> 
    First element 
</div> 
<div> 
    Second element 
</div> 

限制：Some Label的長度未知。所以我不能使用硬編碼寬度。

謝謝。

山姆

Answer 1

如果你改變你的HTML是這樣的：

<div class="row"> 
    <div class="header">Some Label:</div> 
    <div class="labels"> 
     <div>First element</div> 
     <div>Second element</div> 
     <div>Third element</div> 
    </div> 
</div>​ 

這個CSS會工作得很好：

.row { 
    display: inline-block; 
} 

.header { 
    float: left; 
    margin-right: 5px; 
} 

.labels { 
    float: right; 
} 

演示：http://jsfiddle.net/Ludww/1/