[英]CSS center ul list
我在這里有此列表: 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:info@email.com">info@email.com</a></li>
</ul>
</div>
我試圖將整個列表居中,我嘗試設置寬度並將margin設置為0 auto,但是它什么也沒做,這是我的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;
}
在.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;
}
演示: http : //jsfiddle.net/pfW2v/2/
您不需要div包裝器,將li用作頁腳。 避免使用后代選擇器“ ul li”,如果可以使用“ ul> li”,請使用子選擇器。 它更有效
我認為您可以僅通過以下方式打開頁腳:
擺弄 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:info@email.com">info@email.com</a></li>
</ul>
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.