Question

有没有什么方法可以让一个项目符号在更远的地方发出文字？

我能想到的唯一方法是制作一个自定义子弹图像并更改填充，但我希望能有更简单的分辨率。

Answer 1

只需使用padding-left：

li { padding-left: 20px }

这会将列表项向右移动20个像素，但它不会移动子弹本身。这是一个example fiddle。

Answer 2

试试这个：

<ul>
    <li style="padding: 0px 0px 0px 100px;">line 1</li>
    <li>line 2</li>
</ul>

Answer 3

您可以在li标签的左侧添加填充，但这需要将li list-style-position设置为outside。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            li {
                list-style-position: outside;
                padding-left: 20px
            }

        </style>
    </head>
    <body>

        <ul>
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            <li>Text 4</li>
        </ul>

    </body>
</html>

在无序列表中控制子弹后的空间

3 个答案: