在下拉列表

Question

我正在使用david stutz的bootstrap multiselect我希望限制下拉列表的最大宽度，并在选项的描述超出该宽度时提供水平滚动条。

听起来很简单 - 但是，实际选择了一个选项时会出现问题。所选显示在窗口宽度处被切除。我试图让选定的选项填充下拉列表而不是切断。

我改变了一个小提琴，我发现它可以证明这个问题。如果选择Cheeseeeeeeeeeeeeeee，然后将水平滚动条拉到右侧，文本和蓝色悬停将被切断。

http://jsfiddle.net/Alex1018/Ltmeay87/

＆＃13;

＆＃13;

$(function() {
        $('.multiselect').multiselect();
    });

＆＃13;

.multiselect-container {
    max-width: 15px;
    overflow: auto;
    }

＆＃13;

<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


<select class="multiselect" multiple="multiple">
    <option value="cheese">    Cheeseeeeeeeeeeeeeee     </option>
    <option value="tomatoes">  Tomatoes   </option>
    <option value="mozarella"> Mozzarella </option>
    <option value="mushrooms"> Mushrooms  </option>
    <option value="pepperoni"> Pepperoni  </option>
    <option value="onions">    Onions     </option>
</select>

＆＃13;

＆＃13;

＆＃13;

我错过了一些明显的东西吗？或者这是多选的错误？

Answer 1

您可以设置此属性

.multiselect-container>li{
display:table-row;
}

它会起作用