Question

我已经制作了自定义下拉列表，这是HTML：

<div class='dropdown'>
    <div class='dropdownTitle'>Sort by<span class='select_arrow'></span></div>
    <ul class='selectPanel'>
        <li><input  type='checkbox' id='allProducts'><label for='allProducts'>Name</label></li>
        <li><input  type='checkbox' id='Enterprise'><label for='Enterprise'>Date</label></li>
        <li><input  type='checkbox' id='Security'><label for='Security'>Popularity</label></li>
        <li><input  type='checkbox' id='Data'><label for='Data'>Rating</label></li>
    </ul>
</div>

这在大多数情况下工作正常，但是，如果我浮动下拉列表，内部元素不会像我预期的那样显示：当标签较大时，面板的宽度不会增长。我做了jsfiddle。

有人可以向我解释为什么会这样，以及如何解决？

谢谢！

Answer 1

将white-space: nowrap;添加到您的CSS：

.dropdown {
    display : inline-block;
    font-size: 12px;
    color : #646464;
    white-space: nowrap;
}

Answer 2

您可以通过向white-space: nowrap添加li来解决此问题。像这样：

.dropdown>ul>li {
    margin : 0;
    padding : 0;
    padding : 0 8px;
    display : block;
    white-space: nowrap;
}

这可以防止两个内联块（标签和输入）出现在不同的行上。

Answer 3

嘿，所以基本上当你使用float:right时，如果不适合的元素将被推送到下一行，那么尽可能多的东西会出现在行上。

因此，简单的修复必须设置.dropdown>ul>li的宽度，在这种情况下width : 140px;适用于此小提琴，但它将取决于列表中最长的文本长度

现在看来它是js fiddle

中的样子

浮动元素内的位置

3 个答案: