CSS:控制项目符号和<li>之间的空格

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

也就是说，不是一直都有

*  Some list text goes
   here.

我希望能把它变成

*         Some list text goes
          here.

*Some list text goes
 here.

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

当前回答

您还可以使用背景图像替换作为替代方案，让您完全控制垂直和水平定位。

请看这个问题的答案

其他回答

在li上使用文本缩进效果最好。

文本缩进:-x px;会让子弹更靠近李，反之亦然。

在IE的旧版本中，在负左边使用相对span可能无法正常工作。附注:尽量避免给出职位。

对于list-style-type: inline:

它几乎和DSMann8的答案一样，但css代码更少。

你只需要

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

干杯

ul
{
list-style-position:inside;
}

定义和用法

list-style-position属性指定列表项标记应该出现在内容流内部还是外部。

来源:http://www.w3schools.com/cssref/pr_list-style-position.asp

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

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

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

为此，您可以尝试关闭list-style-type并使用•

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

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

推荐文章