我在SO上尝试了很多解决方案,但似乎都没有。我已经尝试了许多不同的方法让navbar-right工作,但无济于事。
“登录”应该在右边。
这是我的导航:
<div class="navbar-header">
<a href="#" class="logo">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<ul class="nav navbar-nav main-nav">
<a href="index.php"><li>Coin Flip</li></a>
<a href="#"><li>Deposit</li></a>
<a href="index.php"><li>Support</li></a>
<a href="index.php"><li>FAQ</li></a>
<a href="index.php"><li><i class="fa fa-twitter" aria-hidden="true"></i></li></a>
<a href="index.php"><li><i class="fa fa-steam" aria-hidden="true"></i></li></a>
</ul>
<div class="right">
<ul class="nav navbar-nav navbar-right">
<a href="index.php"><li>Login</li></a>
</ul>
</div>
相关的css:
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
}
.navbar a {
text-transform: uppercase;
font-weight: bold;
color: #BDC0C5 !important;
word-wrap: none;
font-style: italic;
font-size: 15px;
padding: 0 !important;
transition: 0.5s all;
align-self: center;
padding-right: 30px !important;
}
.navbar a .fa {
font-size: 20px;
}
.navbar a:hover {
color: #4c7ba3 !important;
text-decoration: none;
}
.right {
float: right;
}
.main-nav {
padding-left: 30px;
display: flex;
align-content: center;
justify-content: center;
}
我尝试了多个位置,显示等。我认为问题可能出在弹性框中?当我在uls周围添加一个容器时,它向右拉,但也打破了我的柔性盒居中。
谢谢!
JSFiddle:https://jsfiddle.net/ga3rcg0w/(确保展开网络视图)
答案 0 :(得分:1)
试试这个:在浏览器上使用Inspect Element。
<ul class="nav navbar-nav navbar-right" style="float:right">
<a href="index.php"><li>Login</li></a>
</ul>
答案 1 :(得分:0)
让我们尝试将.navbar
位置设为相对位置,然后更改并添加right
类的代码。
代码看起来:
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
position:relative; /* <-- Add This */
}
/* New Style */
.right {
position:absolute;
top:0;
right:0;
}
.right ul {
margin-right:10px;
}
它应该像你期望的那样工作:)
答案 2 :(得分:0)
我能够使用它。
.right {
margin-left: auto;
margin-right: 25px;
}
由于弹性框,浮动不起作用。