Question

我需要一个在背景图片上半透明的导航栏。

左侧的徽标和右侧的菜单，列表项之间的间距应相等。如下所示。

https://getbootstrap.com/examples/cover/

http://bootsnipp.com/snippets/featured/full-screen-background-cover-page

我尝试将float:right提供给我的<ul> menulist元素，它走向正确的极端。

HTML

<body>
  <nav>
    <ul style="float:right;">
        <li style="display:inline;"><a href= "#">item1</a></li>
        <li style="display:inline;"><a href= "#">item2</a></li>
        <li style="display:inline;"><a href= "#">item3</a></li>
        <li style="display:inline;"><a href= "#">item4</a></li>
    </ul>
</nav>
</body>

CSS

body {
 background-image:url("giphy.gif");
 background-repeat: no-repeat;
 background-size: cover;
 overflow-x:hidden;
}

nav {
  height:60px;
  width:100%; 
  overflow-y:hidden;
  overflow-x:hidden;
  z-index:1;
  background-color: transparent;
}

Answer 1

使用Bootstrap css，您可以将其作为

<body>
   <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Your LOGO here.</a>
        </div>
        <ul class="nav navbar-nav" style="float:right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li> 
          <li><a href="#">Page 3</a></li> 
        </ul>
      </div>
    </nav>
</body>

希望这有帮助！

右侧的菜单和半透明导航栏中左侧的徽标

1 个答案: