Html 带有无序列表的项目符号中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6550069/
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
Bullets center with unordered list
提问by Logan
Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of text.
有谁知道使项目符号位于多行项目符号列表顶部的 CSS？出于某种原因，如果我有超过一行的文本，我将使用项目符号中心在左侧而不是简单地坐在第一个单词旁边的模板。
回答by NGLN
Set the list style position to inside the list item, see this demo fiddle.
将列表样式位置设置为列表项内部，请参阅此演示小提琴。
CSS:
CSS：
ul {
list-style-position: inside;
}
回答by Ricardo Zea
This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.
这本身不是一个答案，但它可以让其他人洞察具有不同环境的类似视觉情况。
I had the same issue, like so:
我有同样的问题，就像这样：
My HTML looked like this:
我的 HTML 看起来像这样：
<ul>
<li>
<a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
<a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
And the CSS like this:
和这样的 CSS：
a {
display: inline-block;
vertical-align: middle;
}
See the offending part? The vertical-align: middle;declaration.
看到违规部分了吗？该vertical-align: middle;声明。
There are two solutions:
有两种解决方案：
Solution 1
解决方案1
Remove the vertical-align: middle;declaration altogether.
vertical-align: middle;完全删除声明。
Solution 2
解决方案2
Change the value: vertical-align: middle;to vertical-align: top;.
更改值：vertical-align: middle;到vertical-align: top;。
Result (as expected in the beginning):
结果（正如一开始所预期的那样）：
Hope this helps.
希望这可以帮助。
回答by Joshua Welker
You could do something like this:
你可以这样做：
(css)
li div:before
{
background-image:url('bullet.png');
}
(html)
<ul>
<li>
<div>
text<br />
more text
</div>
</li>
</ul>
