twitter-bootstrap 将 li 元素向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41145683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align li element to right
提问by rtom
I want to move one of my li elements to the right, i looked at other solutions but they are not working. li.right{ text-align: right;}should work, but maybe it is canceled by previous css ?
我想将我的 li 元素之一向右移动，我查看了其他解决方案，但它们不起作用。li.right{ text-align: right;}应该可以工作，但也许它被以前的 css 取消了？
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar container">
<ul class="nav navbar-nav">
<li><a href="#">Mac</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Watch</a></li>
<li class="right"><a href="#">Log In</a></li>
</ul>
</div>
</nav>
</body>
Here is CSS
这是 CSS
.navbar {
min-height:32px !important
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar{
text-align: center;
padding-top: 5px;
}
.navbar{
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
li.right{
text-align: right;
}
回答by Stuart
It's cleaner to use the bootstrap built in classes, that are designed for this purpose:
使用专为此目的而设计的内置类的引导程序更干净：
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar container">
<ul class="nav navbar-nav">
<li><a href="#">Mac</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Watch</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Log In</a></li>
</ul>
</div>
</nav>
回答by Prasath V
Use the float:rightproperty
使用float:right物业
.navbar {
min-height:32px !important
}
.navbar .navbar-nav {
list-style-type:none;
float: none;
vertical-align: top;
}
.navbar{
text-align: center;
padding-top: 5px;
}
.navbar{
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
li.right{
float: right;
} <nav class="navbar navbar-default navbar-fixed-top">
<div id="navbar container">
<ul class="nav navbar-nav">
<li><a href="#">Mac</a></li>
<li><a href="#">Iphone</a></li>
<li><a href="#">Ipad</a></li>
<li><a href="#">Watch</a></li>
<li class="right"><a href="#">Log In</a></li>
</ul>
</div>
</nav>