Question

我在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/（确保展开网络视图）

Answer 1

试试这个：在浏览器上使用Inspect Element。

 <ul class="nav navbar-nav navbar-right" style="float:right">
     <a href="index.php"><li>Login</li></a>
  </ul>

Answer 2

让我们尝试将.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;
    }

它应该像你期望的那样工作：）

Answer 3

我能够使用它。

.right {
margin-left: auto;
margin-right: 25px;
}

由于弹性框，浮动不起作用。

浮动权不起作用？

3 个答案: