Question

我正在使用实体化CSS并创建了一个Nav，但希望将其向右移动一点而不影响徽标的位置。参见下面的当前图像；

导航栏照片 RecyclerView cutting off last item

我当前的代码：

< 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 { 浮动：正确； }

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>

实现CSS-将导航栏对齐到最右边

2 个答案: