html - float 导航栏下方的页面内容

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

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

为了不让内容隐藏在导航栏下，将整个内容放入包装 div 并为其分配 padding-top: 60px(或任何合适的值) .

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

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;
}

<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>