2

I've made a custom dropdown, here is the 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>

This is working fine in the most cases, but, if I float the dropdown, the element inside don't show as I would expected: the width of the panel don't grow when the labels are bigger. I've made a jsfiddle.

Can anybody explain to me why this is happening, and how to solve?

Thanks!

4

3 回答 3

4

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

.dropdown {
    display : inline-block;
    font-size: 12px;
    color : #646464;
    white-space: nowrap;
}
于 2013-06-19T16:05:42.563 回答
2

您可以通过添加white-space: nowrap到您的li. 像这样的东西：

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

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

于 2013-06-19T16:06:16.637 回答
0

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

.dropdown>ul>li因此，在这种情况下，简单的解决方法是必须width : 140px;为这个小提琴设置一个宽度，但这将取决于列表中最长的文本长度

这是它现在在js fiddle中的样子

于 2013-06-19T16:05:54.343 回答