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/

当前回答

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

优点:

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

缺点:

试一试来找到一:)

其他回答

对于list-style-type: inline:

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

你只需要

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

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

干杯

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

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

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

优点:

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

缺点:

试一试来找到一:)

使用padding-left: 1 em;文本缩进:<li>标签的-1em。然后，list-style-position:用于<ul>标记。

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

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

推荐文章