html - 内容不显示在梯形 div 内

Question

所以我有一个位于页面左侧的梯形 div，应该是导航栏，但由于某种原因，(ul) 的内容显示在右侧梯形之外。我怎样才能让它的内容显示在里面而不是外面？

HTML:

html,
body {
  width: 100%;
  overflow-x: hidden;
}

.navbar {
  border-left: 100px solid rgba(0, 0, 0, 0.80);
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  width: 0;
  height: 80%;
  position: fixed;
  left: 0px;
}

.navbar ul {
  list-style: none;
  position: absolute;
  padding-left: 0px;
  text-align: left;
  float: left;
}

<div class="navbar">
  <nav>

    <ul>
      <li>Home</li>
      <li>Products</li>
      <li>Contact</li>
    </ul>

  </nav>
</div>

它可能很明显，因为我没有 html 经验。 :P

Answer 1

它实际上显示在外面，因为它具有绝对位置并且容器的宽度为 0。

你得到的黑色部分是一个边框，除非移动它们，否则任何内容都不会出现在边框上。

应用 left:-100px; 会将 UL 移动到正确的位置(100px 是边框的宽度)。

另请注意，同时使用 float 和 position:absolute 是无效的。