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

干杯!

其他回答

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

li:before {
    content: "";
    margin-left: -0.5rem;
}

如果您不希望添加额外的标记,例如<span>,您可以使用:

list-style-position:内部;将列表样式从左侧移动到更接近文本的位置 如果你仍然需要拉近列表项,你可以使用li元素上的::before选择器将文本移向项目符号。

    ul {
        list-style-type: disc;
        list-style-position: inside;
        padding-left: 16px; /* or margin */
    }

    li::before {
        content: '';
        margin-left: -8px;
    }

列表项文本 列表项文本 列表项文本 列表项文本

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

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

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

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

下面是另一个使用css计数器和伪元素的解决方案。我发现它更优雅,因为它不需要使用额外的html标记或css类:

    ol,
    ul {
        list-style-position: inside;
    }
    
    li {
        list-style-type: none;
    }
    
    ol {
        counter-reset: ol; //reset the counter for every new ol
    }
    
    ul li:before {
            content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
    }
    
    ol li:before {
            counter-increment: ol;
            content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
    }

我使用不可分割的空格,以便空格只影响列表元素的第一行(如果列表元素超过一行长)。你可以在这里使用填充。

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