Question

我觉得我已经尝试了从text-align center到margin:0 auto的所有内容，位置相对宽度为100％，但是它们不起作用，我试图将我的ul放在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>                




        <li>





    </ul>
</div>

Answer 1

无需定义设定宽度即可使用。

ul {
    display: table;
    margin: 0 auto;
}

如果你想摆脱左侧填充，从而真正使列表居中，请添加：

padding-left: 0;

Answer 2

这应该为你解决。

ul {
    display: inline-block;
    margin: 0 auto;
}

如果这对您不起作用，则给UL设定一个宽度，即

ul {
    width: 300px;
    margin: 0 auto;
}

CSS中心ul列表在100％宽度div内

2 个答案: