Html CSS 中心 ul 列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21172989/
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
CSS center ul list
提问by user1269625
I have this list here: jsfiddle
我在这里有这个列表：jsfiddle
<div class="footer-location">
<ul>
<li>123 Fake St.</li>
<li>Toronto, Ontario, Y1Y 1Y1</li>
<li>416-555-5555</li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</div>
And I am trying to center the whole list, I tried setting a width and set margin to 0 auto, but it did't do anything, here is my css code:
我试图将整个列表居中，我尝试设置宽度并将边距设置为 0 自动，但它没有做任何事情，这是我的 css 代码：
.footer-location {
float: left;
width: 100%;
padding-right: 20px;
padding-left: 25px;
margin: 0 auto;
text-align: center;
}
.footer-location ul {
list-style: none;
}
.footer-location ul li {
color: #808080;
padding-bottom: 3px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
float: left;
padding-right: 10px;
}
回答by Arbel
on .footer-location ul liuse display:inline-block;instead of float:left;
在.footer-location ul li使用display:inline-block;而不是float:left;
.footer-location ul li {
display:inline-block;
color: #808080;
padding-bottom: 3px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding-right: 10px;
}
回答by CodeToad
you dont need the div wrapper, make the li your footer. avoid descendat selectors 'ul li' , use child selectors if you can 'ul > li'. its more effient
您不需要 div 包装器，将 li 设为您的页脚。避免使用后代选择器 'ul li' ，如果可以，请使用子选择器 'ul > li'。它更有效
I think you can pull off the footer with just this:
我认为您可以通过以下方式取消页脚：
fiddleHTML:
小提琴HTML：
<ul class="footer-location">
<li>123 Fake St.</li>
<li>Toronto, Ontario, Y1Y 1Y1</li>
<li>416-555-5555</li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
CSS:
CSS：
.footer-location {
width: 100%;
text-align: center;
list-style: none;
}
.footer-location > li {
color: #808080;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
display:inline-block;
padding: 0 5px 3px 0;
}
