0

HTML

<div class="select2-container select2-container-multi" id="s2id_5268118036b78">
    <ul class="select2-choices">
        <li class="select2-search-choice">
            <div>aaaaa aaaaaaa</div>
            <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li>
        <li class="select2-search-choice">
            <div>bbbb bbbbbbbbb</div>
            <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li>
        <li class="select2-search-choice">
            <div>ccc ccc ccccccccc</div>
            <a href="#" onclick="return false;" class="select2-search-choice-close" tabindex="-1"></a></li>
        <li class="select2-search-field"><input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input" id="s2id_autogen4" style="width: 10px;">
        </li>
    </ul>
    <div class="select2-drop select2-drop-multi select2-display-none select2-drop-active">
        <ul class="select2-results">
            <li class="select2-no-results">No matches found</li>
        </ul>
    </div>
</div>

相关CSS

.select2-container-multi {
  margin: 10px;
  width: 250px;

   .select2-choices {
    overflow: visible;
  }
}

代码笔

如您所见，设置时，小灰色框（“bbb”和“ccc”）漂浮在其容器之外overflow: visible。如果我将其更改为overflow: hidden，则它们的容器会扩展以适合它们。

我希望容器可以扩展以适应它们，但我还对它们应用了一些 JavaScript 以使它们可拖动，因此可以将它们拉出框外。如果overflow: hidden已设置，则将它们剪辑到框中，一旦将它们拖出，您将无法看到它们。这就是我尝试的原因overflow: visible。

因此我需要两者的行为。是否有一些 CSS 我可以应用来使盒子扩展以适应它的孩子，但也有overflow: visible？

请注意，这overflow: auto只是创建滚动条，这也不好。

4

1 回答 1

1

你试过给它一个浮动吗？

.select2-container-multi .select2-choices {
overflow: visible;
float: left;
}
于 2013-10-23T18:45:52.570 回答