2

我有一个选项框，里面装满了选项，如下所示：

<div class="OptionBox">
  <div class="Option">
    <div class="AddRemoveIcon"></div>
    <img src="images/users/user_1000000002.jpg">
    <span class="Label">Student Name<span class="SubLabel">Student</span></span>
  </div>
  <div class="Option">...</div>
</div>

样式是这样的：

.OptionBox{
  overflow: auto;
  max-height: 200px;
  max-width:300px;
  display: inline-block;
}

.Option {
  display: block;
}

.Option .AddRemoveIcon,
.Option img,
.Option .Label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

我正在使用内联块，因为我喜欢垂直对齐：中间，并且子标签跨度并不总是存在......但是这个问题也发生在浮动：左......

我的问题是当我在选项框中有足够的选项导致溢出时。无论出于何种原因，浏览器都会正确调整大小（即计算每个选项的宽度并相应地调整选项框的宽度），然后添加滚动条。结果是最宽的选项的标签 div 向下移动了一行，因为滚动条从选项框的宽度中删除了 X 个像素。当我为 Option 的子级切换到 float:left 时，Label div 会根据滚动条进行换行。在任何一种情况下， .OptionBox 都不会被推到最宽选项的最佳宽度。包装应该只在达到最大宽度时发生，对吧？这是它的一个小提琴。

我所追求的——而且我确定我在寻求月亮——要么是一种重新定位滚动条的方式，这样它们就不会从 OptionBox 的宽度中消失，要么是一些神奇的 CSS 规则，它告诉浏览器在调整大小时考虑滚动条（有点像 box-sizing:border-box 告诉浏览器在设置元素宽度时考虑填充/边框）。

有什么想法吗？提前致谢！

4

1 回答 1

1

您应该可以通过将最外层的 div 设置为溢出来解决此问题：隐藏。这样你就不会得到 y-overflow 并且滚动条也不会出现。我很确定我看到了一些 CSS 来防止滚动条在没有这个的情况下出现，但在 atm 中找不到它。

于 2015-09-22T18:51:18.360 回答