如何排列列表中的每個單詞，以便條目在同一個點上水平啓動？

Question

下面是我從previous SO question略微改變的例子： http://jsfiddle.net/tPjQR/72/

ol { 
 
    font-family: Georgia, serif; 
 
} 
 
ol span { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 17px 
 
}

<ol> 
 
    <li><span>Entry one</span></li> 
 
    <li><span>Entry two</span></li> 
 
    <li><span>Entrye three</span></li> 
 
    <li><span>Entry five</span></li> 
 
    <li><span>Entry six</span></li> 
 
    <li><span>Entry Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long</span></li> 
 
</ol>

我想排隊列，這樣，無論多少文字是一列，每列的第一個字符將排列起來。

E.g.

不

Entry one 
Entry two 
Entrye three 
Entry five 
Entry six 

而

Entry one 
Entry two 
Entrye three 
Entry five 
Entry six 

有沒有一種方法列表中的內容要做到這一點，或者我需要使用表？

Answer 1

使用下面的代碼來獲取設計...

li span { 
 
    display:inline-block; 
 
    width: 25%; 
 
}

<ol> 
 
    <li><span>Entry</span> one</li> 
 
    <li><span>Entry</span> two</li> 
 
    <li><span>Entrye</span> three</li> 
 
    <li><span>Entry</span> five</li> 
 
    <li><span>Entry</span> six</li> 
 
</ol>

Answer 2

你所要做的是不可能的怎麼一回事，因爲DOM對象渲染是基於其architructure和你想要做的事情可以通過表格。

* { 
 
    font-family: Georgia, serif; 
 
}

<table> 
 
<tr><td>Entry</td><td>One</td></tr> 
 
<tr><td>Entry</td><td>Two</td></tr> 
 
<tr><td>Entry Xyz</td><td>Three</td></tr> 
 
<tr><td>Entry</td><td>Four</td></tr> 
 
<tr><td>Entry</td><td>Five</td></tr> 
 
<tr><td>Entry</td><td>Six</td></tr> 
 
</table>

Answer 3

一種替代的方法...

ol { 
 
    list-style-type: none; 
 
    padding: 0; 
 
} 
 

 
ol li:before { 
 
    content: "Entry"; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
}

<ol> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
</ol>

Answer 4

我通常代碼如下所示：

.list01 { 
 
    width: 200px; 
 
} 
 
.list01 li { 
 
    overflow: hidden; 
 
} 
 
.col01 { 
 
    float: left; 
 
    width: 5em; 
 
} 
 
.col02 { 
 
    display: block; 
 
    overflow: hidden; 
 
}

<ol class="list01"> 
 
    <li><span class="col01">Entry</span><span class="col02">long long long one</span></li> 
 
    <li><span class="col01">Entry</span><span class="col02">two</span></li> 
 
    <li><span class="col01">Entrye</span><span class="col02">three</span></li> 
 
    <li><span class="col01">Entry</span><span class="col02">five</span></li> 
 
    <li><span class="col01">Entry</span><span class="col02">six</span></li> 
 
</ol>

Answer 5

您可以更改顯示屬性您css

li span { 
    display:inline-block; 
    width:15%; 

} 

li p {text-align: left; display:inline-block; margin : 0px 45px;} 

inline-block值使得這個更容易

CSSmargin屬性被用來生成元素周圍的空間。 詳細瞭解CSS Margins

li span { 
 
    display:inline-block; width:15%; 
 

 
} 
 
li p {text-align: left; display:inline-block; margin : 0px 75px;}

<ol> 
 
    <li><span>Entry </span> <p> 
 
    
 
    one</p></li> 
 
    <li><span>Entry</span> <p> 
 
    
 
    two</p></li> 
 
    <li><span>Entryre</span> <p> 
 
    
 
    three</p></li> 
 
    <li><span>Entry</span> <p> 
 
    
 
    fiv</p></li> 
 
    <li><span>Entry</span> <p> 
 
    
 
    six</p></li> 
 
</ol>