實現CSS-將導航欄對齊到最右邊

Question

我正在使用實體化CSS並創建了Nav，但想將其向右移動一點而不影響徽標的位置。 請參閱下面的當前圖像；

導航欄照片

我當前的代碼：

< div class="navbar-fixed">
  <nav class="white" role="navigation" id="top-nav">
    <div class="nav-wrapper container">
      <a id = "logo-container" href="#" class="brand-logo"><img src = "img/DataNavSmaller.png" ></ a >

        < ul class="right hide-on-med-and-down">
        <li><a href = "#" class="active">Home</a></li>
        <li><a href = "#" > Who We Are</a></li>
        <li><a href = "#" > What We Do</a></li>
        <li><a href = "#" > Contact Us</a></li>
      </ul>

      <ul id = "nav-mobile" class="sidenav">
        <li><a href = "#" > Navbar Link</a></li>
      </ul>
      <a href = "#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
  </nav>
</div>

CSS：

nav.brand - logo {

    margin - left: -60px;
    padding - top: 4px;
}

nav.right {

    padding - top: 10px;

}
nav ul a{

    color: black;
    font - size:20px;

}

我該如何實現以上目標？

Answer 1

怎么樣

導航.right {float：right; }

Answer 2

您可以使用CSS屬性position: fixed; top: 10px; right: 5px;設置導航欄的右側position: fixed; top: 10px; right: 5px; position: fixed; top: 10px; right: 5px; 。 position: fixed會使元素保持在原位。 top指定元素到top的距離， right指定元素到right的距離（這些屬性僅在設置display屬性時有效）。

 .navbar-fixed{ position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: #BEBEBE; } .logo{ margin: 10px 10px 10px 15px; background: red; padding: 5px; background: linear-gradient(red, yellow, green); width: 60px; height: 25px; color: white; } .navbar-right{ position: fixed; top: 10px; right: 5px;/*pixels away from the right of the navbar*/ } .title{ display: inline-block; margin: 5px; } 

 <div class="navbar-fixed"> <div class="logo"> <!--<img src="something.png" alt="img"/>--> DataNav </div> <div class="navbar-right"> <div class="title"> Home </div> <div class="title"> Who we are </div> <div class="title"> What we do </div> <div class="title"> Contact us </div> </div> </div>