1

浏览了许多关于如何将菜单水平居中的文章，我似乎无法杀死野兽。有没有人可以帮助编写代码：

我可能已经完全把它弄乱了，我试图让它对齐。:-)

谢谢！

HTML

<div id="container">
<div id="masthead"> </div>
<div id="top-nav" >     
        <ul class="nav">
            <li><a href="#"> Europe </a></li>
            <li><a href="#"> N. America </a></li>
            <li><a href="#"> S. America </a></li>
            <li><a href="#"> Asia </a></li>
            <li><a href="#"> Africa </a></li>
            <li><a href="#"> Australia </a></li>
            <li><a href="#"> Misc </a></li></ul>
            </div>

CSS

}
#top-nav {
height: 50px;
background : transparent;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
background-repeat: no-repeat;
}
ul.nav {
border-radius: 15px;
background : transparent;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
font-weight: bolder;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
font: 100%;
background: transparent;
height : 30px;
font-size : 12px;
color: #000000;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
4

1 回答 1

1

这就是你想要的？小提琴

只需将此 CSS 规则添加到#top-nav元素：

text-align: center;

这对ul.nav元素：

display: inline-block;
于 2013-08-17T17:57:46.927 回答