100%宽度div内的CSS中心ul列表 [英] CSS center ul list inside a 100% width div
本文介绍了100%宽度div内的CSS中心ul列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我感觉好像我已经尝试过从text-align center
到margin:0 auto
的所有事情,相对位置和宽度为100%,但是它们没有用,我试图将UL居中于div内...
I feel as if I have tried everything from text-align center
to margin:0 auto
with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...
这是我的代码
<style type="text/css">
.header {
height: 40px;
background: #000;
width: 100%;
}
.header ul {
list-style-type: none;
}
.header li {
float: left;
line-height: 40px;
}
.header li a {
color: #FFF;
padding: 0 18px;
height: 40px;
}
</style>
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Rates</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
推荐答案
此方法无需定义设置宽度即可.
This works without having to define a set width.
ul {
display: table;
margin: 0 auto;
}
如果要摆脱左侧填充,从而使列表真正居中,请添加:
If you want to get rid of the left-side padding, thus genuinely centering the list, add:
padding-left: 0;
这篇关于100%宽度div内的CSS中心ul列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文