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


当前回答

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

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

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

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

其他回答

您还可以使用背景图像替换作为替代方案,让您完全控制垂直和水平定位。

请看这个问题的答案

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

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

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

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

无序列表以ul标记开始。每个列表项以 默认情况下,列表项将用项目符号(小黑圈)标记:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

输出:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

text-indent属性指定文本块中第一行的缩进。 注:允许为负值。如果值为负,第一行将向左缩进。

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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

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

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

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

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