我有一个网站,coolmath3.org (在 weebly 上),并希望将导航栏居中。我试过了,但没用。
HTML:这是导航栏
<div id="nav-wrap">
<div class="container">
<ul class="wsite-menu-default">
<li class="wsite-nav-0" style="position: relative;" id="active"><a style="position: relative;" href="/">Home</a>
</li>
<li class="wsite-nav-1" style="position: relative;" id="pg340443743893615061"><a style="position: relative;" href="/about.html">About</a>
</li>
<li class="wsite-nav-2" style="position: relative;" id="pg867313554258978042"><a style="position: relative;" href="/suggestions.html">Suggestions</a>
</li>
</ul>
</div>
<!-- end container -->
</div>
CSS:
#nav-wrap .nav {
float:left;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(saperator-h.png) repeat-x bottom;
padding-bottom:40px;
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}
#nav-wrap .container ul > li:last-child,
#nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
line-height:14px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
padding:5px;
margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color:#000;
}
这是一个jsfiddle
最佳答案
我会将 #nav-wrp .container ul li
中的 float:left;
替换为 display:inline-block;
然后我会将 text-align:center;
添加到 #nav-wrap .container ul
这是一个你可以使用的工作示例,我使用了提供的相同的 css 和 html
这些是唯一的改变
#nav-wrap .container ul {
list-style: none;
text-align:center; /* added */
}
#nav-wrap .container ul li {
list-style: none;
/* Removed float: left; */
display:inline-block; /* added */
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}
有关 float
工作原理的更多信息,您可以查看 MDN article
关于javascript - 将导航栏居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20108423/