浮动导航栏下的页面内容

Question

我已经制作了一个使用无序列表修复的导航栏，其中li元素向左浮动。首先，条形图根据需要占据页面的整个宽度，但是当我添加页面的内容时，它在导航栏，因为她漂浮。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  position: fixed;
}

li {
  float: left;
}

li {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
}

<ul>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
</ul>

如何让我的页面内容在导航栏之后开始并让条形图看起来很古老？是否有更好的方法来制作这些条形图/标题？

栏应该占据页面的整个宽度：

Answer 1

如果您希望它为100％，请将width: 100%添加到ul。此外，您可以尝试将width: 100vw视为视口的100％。

如果内容未显示在导航栏下，请使用body { padding: HEIGHT-OF-MENU }。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

li {
  float: left;
}

li {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
}

＆＃13;

<ul>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要为导航分配固定高度，然后将该高度添加为padding-top到正文，或者您可以body display: flex; height: 100vh;，并将其余部分添加到正文与导航相邻的元素中的网页内容，并将其设置为flex-grow: 1和overflow-y: scroll。如果您这样做，可以从导航栏中删除position: fixed，将li设置为display: inline-block，导航将跨越页面的宽度。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}

li {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
section {
  flex: 1 0 0;
  overflow-y: scroll;
}

＆＃13;

<ul>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
  <li>
    <a href=#link></a>
  </li>
</ul>
<section>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  content<br>
  
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将width: 100%添加到ul以使其为全宽。

要不将内容隐藏在导航栏下，请将整个内容放入包裹div并为其分配padding-top: 60px（或任何值适合）。

有关其他详细信息，请参阅下面的代码段。

＆＃13;

＆＃13;

html,
body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 50px;
}

li {
  float: left;
}

li {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
}

li a {
  color: white;
}
li a:hover {
  color: red;
}

.wrapper {
  padding-top: 60px;
}

＆＃13;

<ul>
  <li>
    <a href=#link>1111</a>
  </li>
  <li>
    <a href=#link>2222</a>
  </li>
  <li>
    <a href=#link>3333</a>
  </li>
  <li>
    <a href=#link>4444</a>
  </li>
</ul>
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

  <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
    vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>

  <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
    sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>

＆＃13;

＆＃13;

＆＃13;