如何排列列表中的每个单词，以便条目在同一个点上水平启动？

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>