我正在创建一个带有导航栏的网站。我希望导航栏以 100% 的宽度一直穿过屏幕,但我需要按钮居中。 这是我的 html 代码:
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">NEWS</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">MEDIA <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#">MUSIC</a></li>
<li><a href = "#">VIDEO</a></li>
<li><a href = "#">PICTURES</a></li>
</ul>
</li>
<li><a href = "#">SHOWS</a></li>
<li><a href = "#">Contact</a></li>
</ul>
</div>
和我的CSS代码:
.nav{
margin-top: 63px;
height:80px;
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
//position:left;
margin-left:0;
margin-top: 63px;
padding:0;
text-align:center;
background-color: #333;
width:100%;
position: absolute;
left: 0px;
}
.navbar .navbar-nav{
display:inline-block;
float: none;
}
.nav li{
text-align: center;
padding:15px;
color: white;
margin-top: 3px;
margin-left:10px;
font-size: 20px;
}
.navbar .navbar-collapse {
text-align: center;
}
我认为这一定是一个简单的 css 修复,但我似乎只能将整个导航栏居中,而不仅仅是按钮链接。任何帮助都会非常感谢! http://jsfiddle.net/ZguC7/362/代码链接
更新: 现在我改变了
.nav li{
float: none;
display:inline-block;
}
按钮现在居中,但是当导航栏折叠时,导航按钮水平显示而不是垂直显示。关于如何解决这两个问题的任何建议?
最佳答案
移除 li
元素上的 float
并使用 display: inline-block
。
这不是居中的原因(即使 .nav
有 text-align: center
)对你来说是因为 li
元素是 float left
,这将使元素忽略 text-align
。
.nav li {
float: none;
display: inline-block;
}
关于html - 在 bootstrap 3 中创建导航栏时,我似乎无法让按钮居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34216506/