Question

我有一个有序的清单：

<ol>
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li>
<li>This is the Second g</li>
<li>This is the Third g</li>
<li>This is the fourth g</li>
<li> <strong>This is the fifth g</strong> </li>
<li>This is the seventh g</li>
<li>This is the eight g</li>
<li>This is the ninth g</li>
<li>This is the tenth g</li>
<li>This is the eleventh g</li>
<li>This is the twelvth g</li>
</ol>

如下所示：

1.  They used to bring concerns about their children or their marriages. But
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran
    minister in Springfield, Ill., about their financial worries, and that puts
    him in the unusual position of dispensing investment advice.
2.  This is the Second g
3.  This is the Third g
4.  This is the fourth g
5.  This is the fifth g
6.  This is the seventh g
7.  This is the eight g
8.  This is the ninth g
9.  This is the tenth g
10. This is the eleventh g
11. This is the twelvth g

当我有很多像第一项一样的文字时，我希望它的格式如上。我能够通过设置：

来实现这一目标

list-style-position:outside;

并调整li和ol标签上的一些边距。然而，当我有两位和三位数时，这会产生一些不利影响。我不得不在IE中使用这些边距，数字被切断了。我希望能够返回使用list-style-position inside并删除边距，但文字包含在我想要的数字之下。

有谁知道如何关闭此包装？

Answer 1

试试这个：

li { 
  white-space:nowrap;
}

Answer 2

如果您使用的是无序列表，那么使用list-style-position:outside;将更加可行，这将始终占用标记的相同空间量。由于您使用的是有序列表，我会坚持使用list-style-position:inside;。正如您所发现的那样，问题在于IE和Firefox为标记创建了相同的空间，无论标记中的位数或字体大小如何。所以你需要自己创造空间来掌握自己的事情。这里的诀窍是要知道，默认情况下，IE和Firefox使用不同的属性来创建空间。 IE使用margin上的<ol>（30分），而Firefox使用padding（40个像素），因此您必须重置这两个值才能实现跨浏览器的快乐。< / p>

试试这个：

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}

Answer 3

问题是list-style-position：inside“缩进标记和文本”。所以你永远无法实现你想要用它做的事情。（http://www.w3schools.com/CSS/pr_list-style-position.asp）所以你唯一的选择就是list-style-position：outside。

如果您的问题是某些列表最多可以包含9个项目（1个数字），其他列表最多可以包含99个项目（2个数字），还有一个列表最多可以包含999个项目（3个数字）等等。我会说你有两个选择：

选项1：为每个列表创建一个不同的类（假设您提前知道计数）。也许称它们为digits1，digits2，digits3等。因此，对于1位数的列表，您可以使用：

<ol class='digits1'>
  <li>item</li>
  ...
</ol>

选项2：完全放弃放弃并只使用表格（我知道呃）。但无论列表中有多少项，您都可以保证正确的包装和缩进。

Answer 4

li { white-space: nowrap; }

这将允许文本显示在同一行。它也可能导致其他东西水平扩展。

li { overflow: hidden; }

在这种情况下可能不相关，但它会隐藏超出LI元素固定宽度的任何文本。

另见break-word：

li { word-wrap: break-word }

我认为这个选择器在IE中存在一些问题。

停止列表中的文本换行

4 个答案: