Html 控制无序列表中项目符号后的空间_Html_Css

Html 控制无序列表中项目符号后的空间

html css

Html 控制无序列表中项目符号后的空间,html,css,Html,Css,有没有办法让ul中的一颗子弹后面的文字变得更远我能想到的唯一方法是制作自定义项目符号图像并更改填充，但我希望获得更简单的分辨率。您可以在li标记的左侧添加填充，但这需要将li列表样式位置设置为外部 <!DOCTYPE html> <html> <head> <style type="text/css"> li { list-style-position: outsid

有没有办法让ul中的一颗子弹后面的文字变得更远

我能想到的唯一方法是制作自定义项目符号图像并更改填充，但我希望获得更简单的分辨率。

您可以在li标记的左侧添加填充，但这需要将li列表样式位置设置为外部

<!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>


李{
列表样式位置：外部；
左侧填充：20px
}

文本1
文本2
文本3
文本4

只需使用

左侧填充即可：
li { padding-left: 20px }

这将使列表项向右移动20个像素，但不会移动项目符号本身。这里有一个。
试试这个：
<ul>
    <li style="padding: 0px 0px 0px 100px;">line 1</li>
    <li>line 2</li>
</ul>


第1行
第2行

列表样式位置的默认值是外部
，因此您不需要指定它（当然，除非它在其他地方被覆盖）。谢谢，这是我一直在寻找的内容，不客气：）但是，请注意，@b01是正确的，如果您确实在CSS中的其他地方更改了列表样式位置
，这只会在设置为外部
时起作用。如果您使用列表样式位置：内部
，则不起作用，因为项目符号现在是文本块的一部分。