css單詞換行列表中的對齊方式

Question

我正在製作一個列表以充當表格。我知道我可以使用一張桌子來做同樣的工作，但桌子真的膨脹的代碼。 問題是，如果文本太長，則下一行將位於小區位置的下方。相反，我希望它與第二個單元格對齊。我嘗試着與高度，寬度和花車混在一起。但我似乎無法得到它的工作。

http://jsfiddle.net/dpp2P/1/

所需的外觀：

/* 
9001  This is a long wrapping sentence. This is a long wrapping sentence. This 
     is along wrapping sentence. This is a long wrapping sentence. 

9002  test test test. 

9003  I need this to line up as if it were a table. 

9004  Except that tables bloat your code. 

9005  So i want to use css and lists instead. 
*/ 

Answer 1

添加display:table-cell您right類：

.right{  
    display:table-cell;  
} 

http://jsfiddle.net/3Ub58/1/

Answer 2

使用<div> S，或只設置你的跨度來阻止水平。然後，您可以添加邊框/邊距/填充以實現單元之間的所需間距。

此外，關於表格的整個模糊使用它們，其中顯示的東西是而不是表格。如果要顯示錶格數據，使用它們不成問題。

http://jsfiddle.net/dpp2P/2/

變化：

HTML：

<ul> 
    <li><div class="list">9001</div> <div class="right"> This is a long wrapping sentence. This is a long wrapping sentence. This is a long wrapping sentence. This is a long wrapping sentence.</div></li> 
    <li><div class="list">9002</div> <div class="right">test test test</div></li> 
    <li><div class="list">9003</div> <div class="right">I need this to line up as if it were a table</div></li> 
    <li><div class="list">9004</div> <div class="right">Except that tables bloat your code.</div></li> 
    <li><div class="list">9005</div> <div class="right">So i want to use css and lists instead</div></li> 
</ul> 

CSS：

.right{ 
    width: auto; 
    overflow: hidden; 
    word-wrap:break-word; 
} 

Answer 3

您使用我沒有看到display:table/table-cell; 如果<li>顯示爲table，或table-row和<ul>爲table，<span>可以顯示爲table-cell;

http://jsfiddle.net/dpp2P/7/或http://jsfiddle.net/dpp2P/8/