内联无序列表未正确居中
内联无序列表未正确居中
提问于 2013-02-14 03:30:35
我有一个非常简单的网站，here，它使用粘性的导航栏。列表项在左边的几个点上，我不知道为什么。我已经修补了我能想到的所有页边距和填充，但它就是不动。我还应该指出，我使用的是Bootstrap。
这是我的HTML：
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
<div class="navbar-inner" data-spy="affix-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#service-top">Services</a></li>
<li><a href="#contact-arrow">Contact</a></li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->下面是我的CSS，它与我的导航相关：
.navbar {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding:0;
z-index:999;
margin-bottom:0;
}
.navbar.navbar-inverse .navbar-inner {
background: #390 url(../img/green-bg.png) repeat;
border:none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom:0;
}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
margin:0;
}
.navbar-inner {
text-align:center;
margin-bottom:0;
}
.navbar-inner ul.nav li {
text-align: center;
}
.navbar .nav > li a{
color:white;
background:rgba(0,0,0,0.2);
text-shadow:none;
font-size:1.5em;
font-family: marvel, serif;
padding:.5em 1em;
margin:.5em 1em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white;
background: #390 url(../img/green-bg.png) repeat;
text-shadow:none;
font-size:1.5em;
font-family: marvel, serif;
padding:.5em 1em;
margin:.5em 1em;
-webkit-box-shadow: inset 0 0 10px #000;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}
.navbar .nav > li {
padding:1em;
margin:0;
}
#nav.affix, #nav.affix-bottom {
position: fixed;
top: 0;
width: 100%
}
#nav {
position:relative;
z-index:999;
-webkit-perspective: 1000; -webkit-backface-visibility: hidden;
}我知道这是一个小细节，但我已经尝试了几天了，但我不明白为什么它是一个痛苦。
谢谢你的帮忙,
布赖恩
Stack Overflow用户
发布于 2013-02-14 03:38:03
好消息是，下面是如何将列表项居中：
添加一个名为".center“的类，如下所示：
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>然后使用这个CSS：
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}要重新对齐下拉菜单，请使用以下命令：
.center .dropdown-menu {
text-align: left;
}This was taken from a previous answer.
现在，坏消息是，该解决方案还将移动菜单中的菜单项放在平板电脑和移动视窗的下拉菜单中。十分钟前，我在这里发布了一个问题：
How to Override/Undo CSS Class Attributes for Twitter Bootstrap
如果你找到了解决方案，请告诉我，因为我们都在问同样的问题！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14861486
复制相关文章
相似问题
腾讯云开发者
