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/

当前回答

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

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

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

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

2020-06-04 18:55:49

其他回答

如果你的列表样式是在里面，那么你可以删除子弹并创建你自己的…例:(在scss!)

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

如果你的列表样式是外部的，那么你可以这样做:

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

2021-01-24 21:00:16

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

优点:

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

缺点:

试一试来找到一:)

2018-04-05 17:09:04

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

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

而且，它确实有效!

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

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

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

来源:CSS字符转义序列

2022-12-30 10:47:12

无序列表以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>

2016-07-15 18:57:28

如果您不希望添加额外的标记，例如<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;
    }

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

2021-09-17 17:46:52

CSS:控制项目符号和<li>之间的空格

推荐文章

最新文章

标签