如何将 CSS 导航栏元素向右移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18754370/
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
How to move CSS navbar elements to the right?
提问by user2770919
For an online course I was taking I created a web app through heroku
对于我参加的在线课程，我通过 heroku 创建了一个网络应用程序
Here is the site: http://sportmem.herokuapp.com/#
这是网站：http: //sportmem.herokuapp.com/#
In the top I have a navigation bar with elements for home, about, faq, contact, login and register
在顶部，我有一个导航栏，其中包含主页、关于、常见问题解答、联系方式、登录和注册等元素
I would like to move the login and register elements to the right of the navigation bar so the login drop-down menu looks nicer
我想将登录和注册元素移动到导航栏的右侧，以便登录下拉菜单看起来更好
here is the code I tried
这是我试过的代码
<div class = "navbar navbar-inverse navbar-fixed-top">
<div class = "navbar-inner">
<div class = "container">
<button type = "button" 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>
</button>
<a class = "brand" href = "#"><span class = "SportMem-sport">Sport</span><span class = "SportMem-mem">Mem</span></a>
<div class = "nav-collapse collapse">
<ul class = "nav">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "/about">About</a></li>
<li><a href = "/faq">FAQs</a></li>
<li><a href = "/contact">Contact</a></li>
<li class = "login">
<a id = "login-start" href = "#">
Login<span></span>
</a>
<div id = "login-form">
<form>
<fieldset id = "inputs">
<input id = "username" type = "email" name = "Email" placeholder = "Email Address" required>
<input id = "password" type = "password" name = "Password" placeholder = "Password" required>
</fieldset>
<fieldset id = "actions">
<input type = "submit" id = "submit" value = "Log-in">
<label><input type = "checkbox" checked = "checked"> Keep me logged-on</label>
</fieldset>
</form>
</div>
</li>
<li class = "register.html"><a href = "#register">Register</a></li>
</ul>
</div>
</div>
</div>
i tried floating the elements to the right among others but nothing I've tried worked
我尝试将元素向右浮动，但我尝试过的一切都没有奏效
Could someone please find me a solution?
有人可以帮我找到解决方案吗？
Help is greatly appreciated
非常感谢帮助
Edit: Here is the entire CSS code in case you're wondering
编辑：这里是完整的 CSS 代码，以防您想知道
<style type = "text/css">
@media (min-width: 980px) {
body {
padding-top: 60px;
}
.linediv-l {
border-right: 3px #DAA520 solid;
}
.linediv-r {
border-left: 3px #DAA520 solid;
}
}
@media (max-width: 480px) {
.copy {
padding: 2.5% 10%;
}
.linediv-l {
border-bottom: 3px #DAA520 solid;
}
.linediv-r {
border-top: 3px #DAA520 solid;
}
}
a:hover {
text-decoration: none;
color: gold;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
.navbar {
position: fixed;
}
#login-form {
display:none;
position: absolute;
}
ul > li {
display: inline;
color: white;
}
body {
background-color: #A52A2A;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.heading, .subheading {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
text-align: center;
}
.brand {
display: inline;
}
.SportMem-sport {
color:#DAA520;
}
.SportMem-mem {
color: #32CD32;
}
.subheading {
font-style: italic;
font-size: 12px;
}
p.lead {
padding-top: 1.5%;
line-height: 30px;
}
p {
font-size: 18px;
line-height: 24px;
}
.pitch {
padding: 2.5% 0%;
}
.order {
padding: 2% 0%;
}
.actions {
background-color: #343434;
padding: 3% 0%;
border: 5px solid #00008B;
}
.actions:hover {
border: 5px solid #4B0082;
}
img {
border: 5px solid #006400;
}
img:hover {
border: 5px solid #DAA520;
}
.video, .thermometer, .order, .social, .statistics {
text-align: center;
}
.statistics h3, .statistics p {
color: white;
}
.copy {
padding-top: 2.5%;
padding-bottom: 2.5%;
text-align: justify;
}
.asset {
padding: 2.5% 0%;
}
h3 {
text-align: center;
color: #FFD700;
text-shadow: 2px 2px #00008B;
}
h3:hover {
color: #20B2AA;
text-shadow: 2px 2px #F8F8FF;
}
.footer li {
color: #cccccc;
text-align: center;
display: inline;
}
div.addthis_toolbox {
width:180px;
margin: 0 auto;
}
there is no float:left found
没有浮动：找到左
I don't know how that guy figured it out
我不知道那家伙是怎么想出来的
回答by Bala
This is the snapshot after making changes:
这是更改后的快照：
Remove float:left;from
删除float:left;从
<ul class="nav">
and add float:right;in login and register
并添加float:right;登录和注册
<li class="login" style="float:right;">
<li class="register.html" style="float:right;">
回答by Robert Burke
In the context of Bootstrap, all previous answers are wrong. There is specifically navbar-leftand navbar-rightto handle just this situation. You should not be trying to float elements left and right on your own, you should be using the provided classes.
在 Bootstrap 的上下文中，之前的所有答案都是错误的。有专门navbar-left和navbar-right处理这种情况。您不应该尝试自己左右浮动元素，您应该使用提供的类。
The reason you are seeing no space between the elements is that when you apply float to multiple items and they end up next to each other, any margins are ignored when they are floated. The only way to maintain those margins is to put the items in a containing div and float that div, which is why the Bootstrap framework provided navbar-leftand navbar-right.
您看到元素之间没有空间的原因是，当您将浮动应用于多个项目并且它们最终彼此相邻时，当它们浮动时任何边距都将被忽略。保持这些边距的唯一方法是将项目放在包含的 div 中并浮动该 div，这就是 Bootstrap 框架提供navbar-left和 的原因navbar-right。
As you also should have noticed, when floating right on each individual item instead of a containing div, is that you have to define the element in your markup as the first element if you want it to be the far right element; which is obviously unintuitive and should be avoided since someone coming behind you may not understand what is happening.
您还应该注意到，当在每个单独的项目上浮动而不是包含 div 时，如果您希望它成为最右侧的元素，则必须将标记中的元素定义为第一个元素；这显然是不直观的，应该避免，因为在你身后的人可能不明白发生了什么。
I know this is 3 years late, but I felt the proper instructions needed to be pointed out. Bootstrap's website has examples of how to structure the navbar: http://getbootstrap.com/components/#navbar
我知道这晚了 3 年，但我觉得需要指出正确的说明。Bootstrap 的网站提供了如何构建导航栏的示例：http: //getbootstrap.com/components/#navbar
回答by Shaan Singh
If you want to shift items to the right, a simple text align should work:
<li class = "login" style="text-align: right;">Or, if you want to use CSS & HTML:
HTML:<li class = "login">
CSS:
如果你想向右移动项目，一个简单的文本对齐应该可以工作：
<li class = "login" style="text-align: right;">或者，如果你想使用 CSS & HTML:
HTML: <li class = "login">
CSS:
.login {
text-align: right;
}
