Question

我有一个下拉菜单，我希望文本内容控制宽度。有时此菜单会有一个带有滚动条的max-height。

如果您运行下面的代码段，您会看到由于滚动条的存在，最长文本的最后一个单词将会换行。使用white-space: nowrap;将导致文本位于y滚动条下方，并显示x滚动条。

最好的方法是什么？我可以用JS做很多事情（检测文本的宽度并向容器应用宽度等）但是只寻找CSS解决方案。

＆＃13;

.drop-menu {
  postion: relative;
}

ul, il {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}

.drop-items li {
  border-bottom: 1px solid #ccc;
  /* white-space: nowrap; */
}

＆＃13;

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

＆＃13;

Answer 1

尝试添加.drop-items { left: 0; right: 0; }。请注意，容器的宽度将不再由内容决定。

顺便说一句，你有一个错字postion，应该是position。

<强> jsFiddle

＆＃13;

.drop-menu {
  position: relative;
}
ul,
il {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
}
.drop-items li {
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
}

＆＃13;

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item last</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

＆＃13;

或者，只需使用一些正确的填充，例如.drop-items li { padding-right: 30px; }为水平滚动条腾出空间。根据{{3}} - ＆＃34;在现代浏览器上，滚动条通常为17像素宽，但我仍然建议您在使用线框或创建模型时继续使用20像素作为规格。＃34;。

如果需要，您甚至可以overflow-y: auto; overflow-x: hidden;。

<强> this article

＆＃13;

.drop-menu {
  position: relative;
}
ul,
il {
  margin: 0;
  padding: 0;
  list-style: none;
}
.drop-items {
  overflow: auto;
  max-height: 100px;
  position: absolute;
  border: 1px solid #ccc;
}
.drop-items li {
  border-bottom: 1px solid #ccc;
  white-space: nowrap;
  padding-right: 30px;
}

＆＃13;

<div class="drop-menu">
  <span>Menu</span>
  <div class="drop-items">
    <ul>
      <li>Item</li>
      <li>Item item item item item last</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

＆＃13;

溢出滚动和nowrap不需要的滚动条

1 个答案: