Question

所以我有一个梯形的div，它位于页面的左侧，应该是导航栏，但由于某种原因，（ul）的内容显示在右边的梯形之外。如何让内容显示在里面而不是显示出来？

HTML：

＆＃13;

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

＆＃13;

<div class="navbar">
  <nav>

    <ul>
      <li>Home</li>
      <li>Products</li>
      <li>Contact</li>
    </ul>

  </nav>
</div>

＆＃13;

它可能是非常明显的，因为我不是在html中经历过的。：P

Answer 1

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

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

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

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

Answer 2

您只需在margin-left: -85px;

中添加margin-left: -85px;即可

 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;
  margin-left: -85px;
}

  <div class="navbar">
  <nav>

    <ul>
      <li>Home</li>
      <li>Products</li>
      <li>Contact</li>
    </ul>

  </nav>
</div>

Answer 3

正如Salketer所说，是的，使用float with position：absolute是错误的。更好地使用左或右位置：绝对。

navbar ul {
       color:#fff;
       list-style: none;
       position: absolute;
       padding-left: 0px;
       text-align: left;
       right: 0;
      }

检查Here

内容未显示在梯形形状div

3 个答案: