Question

我想在html中减少项目符号和文本之间的差距..

我的实例

这是文字

如何使用css增加或减少子弹和文本之间的差距？

Answer 1

使用带有负值的text-indent，如下所示：

li {text-indent:-8px}

Answer 2

我能够实现此目的的唯一方法是[减少本机浏览器渲染的li 间距]，方法是在li添加额外标记并设置负边距。

举个例子：

<强>标记：

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

<强> CSS

li span { margin-left: -10px; }

这可能会为这么小的需求添加相当多的额外不必要的标记。您最好在li元素上使用背景图像，这样可以在没有额外标记的情况下提供更好的位置控制。

Answer 3

您可以通过在<li>元素上设置填充来使其更大：

<ul >
    <li style="padding-left:20px;">test</li>
    <li>test 2 </li>
</ul>

我无法弄清楚如何使它变小，负值似乎没有效果。

Answer 4

我就是这样解决的。

如果您的列表样式是 inside，那么您可以删除项目符号并创建自己的……例如（在 scss 中！）

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

如果您的列表样式是 outside，那么您可以执行以下操作：

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

这种方法的优点是您不会得到更复杂的 HTML，并且 /

组合开箱即用。

如何修改项目符号和列表文本之间的差距？

4 个答案: