Question

我有一个填充选项的选项框，如下所示：

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

我正在使用内联块，因为我喜欢vertical-align：middle，并且SubLabel跨度并不总是存在......但是这个问题出现在float：left也...

我的问题是当我在Option框中有足够的选项导致溢出时。无论出于何种原因，浏览器都会正确调整大小（即，计算每个选项的宽度并相应地调整选项框宽度），然后添加滚动条。结果是最宽的选项让他们的Label div撞到了一条线，因为滚动条已经从Option框的宽度中删除了X像素。当我切换到float：左边为Option的子节点时，Label div根据滚动条进行换行。在任何一种情况下，.OptionBox永远不会被推到最宽的选项。包装应该只在达到最大宽度时发生，对吧？ Here's a fiddle of it

我所追求的 - 而且我确定我要求登月 - 要么是一种重新定位滚动条的方法，所以它们不会带走OptionBox的宽度，或者一些神奇的CSS规则，告诉浏览器在调整大小时考虑滚动条（有点像box-sizing：border-box告诉浏览器在设置元素的宽度时考虑填充/边框）。

有什么想法？提前谢谢！

Answer 1

您应该能够通过将最外层的div设置为overflow：hidden来解决此问题。这样你就不会得到y溢出，滚动条也不会出现。我很确定我看到了一些css来保持滚动条没有这个，但是找不到它。

当滚动条出现时，内联块元素会出现问题

1 个答案: