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


当前回答

老问题了,但是: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>

干杯!

其他回答

我99.9999%确定没人在乎这个问题,因为这个问题12年前就有人问过了,但我现在需要解决这个问题,以下是我的发现:

后面的空格被视为转义的一部分,因此如果您确实想在转义字符后面加上一个空格,请使用2个空格。

而且,它确实有效!

ul.asterisks {
  list-style-type: '\2731\ ';
}

来源:在标记和CSS中使用字符转义

附注:也许这是因为我做这个工作太久了,我已经失去理智了?在浏览器的dev视图中插入空格。为了获得空间,我必须逃离空间??(见上图)。疯狂。(顺便问一下,为什么这些页面都是2010年的?2010年发生了什么?等一下……12年前的2010年。:恐惧:)

来源:CSS字符转义序列

更多信息w3schools ul { list-style:没有; }

Ul li::before { 内容:“2022 \”; 颜色:黑色; 显示:inline-block; 宽度:8 px;}

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

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

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

老问题了,但是: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>

干杯!

没有人提到::marker属性

它允许将空间设置为小于浏览器默认值。

Ul li::marker { 内容:“•”;/*作为副作用,将空格设置为零*/ 字体:1.2em/1 sans-serif;/*调整子弹大小*/ } Ul li { padding-left: .2em;/*完全控制空格*/ } < ul > <李>一 <李>两个 <李>三 < / ul >