Question

更改navbar的宽度时遇到问题。我希望navbar延伸到屏幕两端，各留一个小间隙。我在CSS中使用了 position: fixed 和 width: xx% 来实现此目的。但是，我想知道是否可以使导航栏不粘手，因为滚动时该导航栏位于页面顶部。我尝试过在线搜索，但无济于事。

我正在使用W3示例来说明我的问题。

就过多操纵navbar而言，我觉得这可能是不好的做法？

body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-img {
  background-image: url("http://panoramicireland.com/images/2016/03/15/panoramic-ireland-dublin-3513.jpg");
  min-height: 380px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.container {
  position: absolute;
  margin: 20px;
  width: auto;
}

.topnav {
  position: fixed;
  overflow: hidden;
  background-color: #333;
  width: 93%
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

<h2>Navbar on Image</h2>
<div class="bg-img">
  <div class="container">
    <div class="topnav">
      <a href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
  </div>
</div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="line"></div>

<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="line"></div>

<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="line"></div>

Answer 1

尝试更改：

.topnav {
  overflow: hidden;
  background-color: #333;
  width: 93vw;
}

在CodePen上查看

是您要找的东西吗？

Answer 2

首先，如果我理解正确，那么您不希望导航栏变粘。在这种情况下，您不需要position：fixed属性。我建议您阅读并了解CSS的 position 属性，因为了解网页中元素的位置非常重要，以便能够轻松地操纵页面。您可以从wschools开始阅读：https://www.w3schools.com/cssref/pr_class_position.asp

此外，我认为您过度操作导航栏是正确的。您的navbar类位于容器内，该容器在您的上下文中没有实际作用，这是多余的。解决此问题的方法有多种，但我选择的一种方法是删除容器类，并对 topnav 类进行以下更改：

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #333;
  width: 93%;
  margin: 0 auto;
}

相对定位会将导航栏放在页面顶部，并且 margin：0 auto 将确保元素居中。

导航栏宽度，位置固定但不发粘

2 个答案: