尝试了display: inline-block; text-align: center;
以及互联网上的许多内容,但没有任何帮助。
#nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc; }
#nav li {
list-style: none;
float: left; }
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
HTML:
<ul id="nav">
<?php wp_nav_menu('menu=header_menu&container=false'); ?>
<div class="clear"></div>
</ul>
看起来像这样:
......而且我不知道如何集中它。
答案 0 :(得分:4)
基本是:
ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
li {
display:inline-block;
}
注意如果<li>
浮动,则会丢失:)
然后,如果你需要以流体宽度居中ul:在html中向前走一步。
http://jsfiddle.net/KWG2j/1
nav {
text-align:center;
}
nav ul {
margin: 0;
padding: 0;
display:inline-block;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
nav li {
display:inline-block;
}
nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
答案 1 :(得分:0)
在UL上设置固定宽度,然后将其边距调整为
margin: 0 auto;
这将对具有明确宽度的块元素的左侧和右侧应用相等的边距。
答案 2 :(得分:0)
#nav {
margin: 0;
padding: 0;
text-align:center;
list-style: none;
background-color: #C9C9C9;
border-bottom: 5px solid #ddd;
border-top: 1px solid #ccc;
}
#nav li {
display:inline-block;
}
#nav li a {
display: block;
padding: 5px 5px;
font-size: 13px;
text-decoration: none;
color: #000;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #fff;
background-color: #000;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<div class="clear"></div>
</ul>