Question

我在页面顶部有一些导航链接，我无法放置在屏幕中央。任何人都可以建议我在CSS中出错的地方吗？

这是CSS：

#nav {
list-style-type:none;
text-align:center
}

ul li {
display:inline-block;
border-radius:10px;
background:#EEE;
margin:5px;
}

li a {
float:left;
padding:30px;
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
box-shadow:3px 3px black;
}

li a:hover {
background:#CCC;
color:#333;
}

li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}

由于

Answer 1

您实际上我已经更新了您的 css ，我希望这项工作适合您： -

<强> DEMO

<强> CSS

#nav {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    background: none repeat scroll 0 0 #B8B8B8;
    height: 400px;
    list-style-type: none;
    margin: auto;
    padding: 40px 0;
    width: 400px;
}

ul li {
display:inline;

}

li a {
text-decoration:none;
color:black;
text-shadow: 1px 1px #DDD;
border-radius:10px;
background:#EEE;
margin:5px;
padding:30px;
box-shadow:3px 3px black;
}

li a:hover {
background:#CCC;
color:#333;
}

li a:active {
background:#555;
color:white;
text-shadow: 1px 1px #000;
}

Answer 2

尝试使用<ul>包装这些<div style="margin-left: auto; margin-right: auto"> - 标签这样，您可以立即集中所有<ul> - 代码。

如果图片中的“1,2,3,4,5”是ul元素而#nav是周围div的ID，则可以在样式表中将margin-left: auto; margin-right: auto添加到#nav。

Answer 3

以下是如何集中UL的快速演示：http://jsfiddle.net/73Mum/1/

<div class="wrap">
 <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
 </ul>
</div>

.wrap {
 text-align:center;
 background:#999;
 padding:100px 0;
}

ul {
 width:500px;
 margin:0 auto;
}
ul li {
 display:inline-block;
 padding:10px;
 background:#ccc;
}

使用CSS </>中心<ul>

3 个答案: