Materialise CSS- 将导航栏对齐到最右侧

Question

我正在使用 materialize 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

怎么样

nav .right { float: right; }

Answer 2

您可以使用 CSS 属性 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>

Materialise CSS- 将导航栏对齐到最右侧

Materialize CSS- Align navbar to the far right

html

css

materialize