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

另一种方法......

＆＃13;

ol {
  list-style-type: none;
  padding: 0;
}

ol li:before {
  content: "Entry";
  display: inline-block;
  margin-right: 10px;
}

＆＃13;

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

＆＃13;

Answer 3

您可以更改css

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

}

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

inline-block 显示属性的值使这更容易

CSS margin 属性用于生成元素周围的空间。 详细了解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>

Answer 4

我通常编码如下：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

您尝试做的事情是不可能的，因为DOM对象呈现基于其结构，您可以通过表格做什么。

* {
    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>

如何排列列表中的每个单词以使条目在水平方向上从同一点开始？

5 个答案: