我想控制子弹在<ol>或<ul>中向右推动<li>的水平空间。

也就是说,不是一直都有

*  Some list text goes
   here.

我希望能把它变成

*         Some list text goes
          here.

or

*Some list text goes
 here.

我环顾四周,但只能找到将整个街区向左或向右移动的说明,例如http://www.alistapart.com/articles/taminglists/


当前回答

老问题了,但仍然相关。 我建议使用负文本缩进。 List-style-position必须在外部。

优点:

子弹自动定位正确 改变字体大小不会破坏项目符号的位置 没有额外的元素(也没有::伪元素) 适用于RTL和LTR而不改变CSS。

缺点:

试一试 来 找到 一:)

其他回答

可以在列表项上使用padding-left属性(而不是在列表本身上!)。

这个应该可以了。一定要把子弹对准外面。你也可以使用CSS伪元素,如果你可以在IE7中向下放置它们。我真的不推荐使用伪元素来做这种事情,但它确实可以控制距离。

ul { list-style: circle outside; width: 100px; } li { padding-left: 40px; } .pseudo, .pseudo ul { list-style: none; } .pseudo li { position: relative; } /* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */ .pseudo li:before { content: '\2192'; position: absolute; left: 0; } <ul> <li>Any Browser really</li> <li>List item <ul> <li>List item</li> <li>List item</li> </ul> </li> </ul> <ul class="pseudo"> <li>IE8+ only</li> <li>List item <ul> <li>List item with two lines of text for the example.</li> <li>List item</li> </ul> </li> </ul>

你可以给<li>元素一个padding-left。

似乎您可以(在某种程度上)使用<li>标记上的填充来控制间距。

<style type="text/css">
    li { padding-left: 10px; }
</style>

问题是,它似乎不允许你像最后一个例子那样舒适地挤压它。

为此,您可以尝试关闭list-style-type并使用&bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

老问题了,但仍然相关。 我建议使用负文本缩进。 List-style-position必须在外部。

优点:

子弹自动定位正确 改变字体大小不会破坏项目符号的位置 没有额外的元素(也没有::伪元素) 适用于RTL和LTR而不改变CSS。

缺点:

试一试 来 找到 一:)