我想控制子弹在<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/


当前回答

您可以使用ul li:before和背景图像,并分别将position: relative和position:absolute分配给li和li:before。通过这种方式,您可以创建一个图像,并将其定位到任何您想要相对于li的位置。

其他回答

似乎您可以(在某种程度上)使用<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>

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

如果你只想减少项目符号和文本之间的间距,似乎有一个更干净的解决方案:

li:before {
    content: "";
    margin-left: -0.5rem;
}
ul
{
list-style-position:inside;
} 

定义和用法

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

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

老问题了,但是:before伪元素在这里工作得很好。

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

它工作得非常好,不需要太多额外的规则或html。

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

干杯!