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


当前回答

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

其他回答

当您希望将文本移动到更靠近项目符号的位置时,即使您有多行文本,以下解决方案也很有效。

右边距使您可以将文本移动到更靠近项目符号的位置

文本缩进确保多行文本仍然正确对齐

李:{之前 内容:“”; margin-right: 5 px;/*调整使文本更靠近项目符号*/ } 李{ indent: 5 px;/*对齐文本的第二行*/ } < ul > <li> Item 1…李< / > <li> Item 2…这个项目有大量的文本,导致第二行!请注意,第二行是如何与第一行对齐的!李< / > <li> Item 3…李< / > < / ul >

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

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

干杯!

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

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

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