如何使项目符号列表与 css 中的文本对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7516005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a bullet list align with text in css?
提问by Karem
The image demonstrates the problem. I want the bullet list to be aligned with the text, not indented.
该图像说明了问题。我希望项目符号列表与文本对齐，而不是缩进。
This must be modified in css i guess, because source is:
我猜这必须在 css 中修改，因为源是：
<p>This is a test :)</p>
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
<p><strong>Bla bla</strong></p>
<p><strong>Dette er en test</strong></p>
<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>
<p><strong>Dette er en test</strong></p>
<p><strong><span class="Apple-style-span" style="font-weight: normal;"><strong>Dette er en test</strong></span></strong></p>
</div>
So how can I remove the padding/margin from left in this bull list? I tried margin: 0; padding: 0;did not work out
那么如何从这个牛市列表中的左侧删除填充/边距？我试过margin: 0; padding: 0;没有用
回答by NicolaPasqui
Apply padding-left:0 and change the list style position to inside
应用 padding-left:0 并将列表样式位置更改为 inside
ul {
padding-left:0;
}
ul li {
list-style-position:inside
}
Example link http://jsfiddle.net/vF5HF/
回答by Dennis Traub
ul {
margin-left: 0;
padding-left: 0;
}
li {
margin-left: 1em;
}
回答by nico
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Bullet alignment</title>
<style type="text/css">
body { font-size: 14pt; margin: 100px; background-color: #f2f2f2; }
ul { margin-left: 0; padding-left: 2em; list-style-type: none; }
li:before {
content: "13";
text-align: left;
display: inline-block;
padding: 0;
margin: 0 0 0 -2em;
width: 2em;
}
</style>
</head>
<body>
<p>Bullet alignment 😈</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
<p>That's all Folks</p>
</body>
回答by Nesha Zoric
As @NicolaPasqui mentioned, for your problem you should use:
正如@NicolaPasqui 提到的，对于您的问题，您应该使用：
ul {
padding-left: 0
}
ul li {
list-style-position: inside;
}
When setting list-style-position to inside, the bullet will be inside the list item.
将 list-style-position 设置为inside 时，项目符号将位于列表项内。
Unlike setting it to outside, where the bullet will be outside the list item.
与将其设置为外部不同，项目符号将在列表项之外。
There is a great article about bullet styleI think you could benefit from here.
有一篇关于子弹样式的很棒的文章，我认为您可以从这里受益。
