对于 HTML 和 CSS，我如何防止带有 list-style: none; 的 li 项实际上被推到右边，只是把它贴在边缘？我的英语不太好，所以我会展示一些例子。
我在谷歌上搜索了一下，谷歌似乎不明白我的意思。
这是我的代码片段，请运行它来理解我的意思:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
border: 1px solid #000;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>a
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>b</li>
<li>c</li>
<li>d
<ul>
<li>i</li>
<li>ii</li>
<li>iii</li>
</ul>
</li>
</ul>
</body>
</html>注意:我添加了边框以显示 li 的对齐方式。
你有没有看到它是如何变成楼梯型的，而且它没有粘在边缘上？
我的问题是如何让它们像这样贴在边缘上完美对齐成一条线？
a
1
2
3
b
c
d
i
ii
iii
如果你有任何答案，请告诉我。
最佳答案
你只需要添加 1 行 CSS:
padding-left: 0; 删除填充。
body {
border: 1px solid #000;
}
ul {
list-style: none;
padding-left: 0;
}<ul>
<li>a
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>b</li>
<li>c</li>
<li>d
<ul>
<li>i</li>
<li>ii</li>
<li>iii</li>
</ul>
</li>
</ul>关于HTML5/CSS3 : How Do I Prevent LI Items From Being Pushed To The Right with No Bullet Without Using JavaScript or PHP?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53844415/