3

我有一个有序列表：

<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 中数字被截断了。我希望能够返回使用 a list-style-positionof inside并删除边距，但文本包裹在数字下方，这不是我想要的。

有谁知道如何关闭这个包装？

4

4 回答 4

4

试试这个：

li { 
  white-space:nowrap;
}
于 2009-03-24T14:33:59.797 回答
3

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

试试这个：

ol {
    margin-left: 0;
    padding-left: 3em;
    list-style-position: outside;
}
于 2009-03-24T15:44:56.833 回答
2

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

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

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

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

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

于 2009-03-24T15:13:10.483 回答
1 
li { white-space: nowrap; }

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

li { overflow: hidden; }

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

另见断词：

li { word-wrap: break-word }

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

于 2009-03-24T14:37:13.283 回答