Question

我遇到一个奇怪的问题，即当其父级具有固定的{和{1}}时，无序列表的子级不会拉伸以占据其父级宽度的100％。

将鼠标悬停在列表中的超链接上时，悬停效果并不适用于整个文本。

我不能让文本跳到下一行。

在此之前，我的头撞在墙上。有什么想法吗？

这是我的HTML：

overflow: scroll

还有我的CSS：

    <div class="container">
      <ul>
        <li><a href="#">Test Link with a long name that stretches the container</a></li>
        <li><a href="#">Test Link with a long name that stretches the container</a></li>
        <li><a href="#">Test Link with a long name that stretches the container</a>
      </ul>
    </div>

And a link to a codepen demonstrating the issue

谢谢！

Answer 1

在ul中添加宽度100％应该可以。

Answer 2

只需更改.container a上的样式。将display更改为block，然后删除空白nowrap规则。

.container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 250px;
      background: black;
      color: white;
      overflow: scroll;
}

.container ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
}

.container a {
      display: block;
      color: white;
      text-decoration: none;
      clear:both;
      padding: 15px;
      position: relative;
      width: 100%;
}
.container a:hover {
        background: white;
        color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
  </ul>
</div>

Answer 3

从width: 100%元素中删除a。其他一切都很好。 100%的宽度在您的情况下表示250px。

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 250px;
  background: black;
  color: white;
  overflow: scroll;
}

.container ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

a {
  display: inline-block;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  clear: both;
  padding: 15px;
  position: relative;
  /* width: 100%; */
}

a:hover {
  background: white;
  color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
  </ul>
</div>

Answer 4

您需要删除以下两个规则：white-space: nowrap; width: 100%;中的a。空格将阻止文本分解为新行，宽度将成为a标签，只要容器为250px - scrollbar if there is。

.container{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 250px;
  background: black;
  color: white;
  overflow-y: scroll;
}
.container ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

a{
  display: inline-block;
  color: white;
  text-decoration: none;
  clear:both;
  padding: 15px;
  position: relative;
}
a:hover{
  background: white;
  color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
      <ul>
        <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a></li>
        <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a>
          
          <ul>
        <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
        <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
      <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
      </ul>
          
        </li>
      <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a></li>
      </ul>
      
    </li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
  </ul>
</div>

我也将overflow更改为overflow-y，因为没有意义在x轴上显示滚动，即使这样也无法滚动。

无序列表中的元素不会占用其父容器的100％宽度

4 个答案: