防止按钮宽度更改Basic CSS

Question

基本的css问题在这里。

每次按“全部检查”时，该按钮会填充列表中的名称（这很好）。

问题是：按钮宽度本身会扩大并变大。我想保持它固定。此外，如何设置它可以显示的列表项数量的限制？因此，例如，如果有很多项目，在“测试5”之后，应出现“...”。

顺便说一下：这就是我的custom.css，.btn-default实际上来自bootstrap，但我想改变我的多选择类中的一些东西。我改变了插入边缘，因为插入符号正好在文本旁边，我希望它是非常正确的，也许这就是弄乱一切的东西？

custom.css：

    .sv-manage-multiselect-dropdown {

        .btn-default {
            background-image: none;
            border: 1px solid #ADA9A9;
            padding: 6px 8px 1px 8px ;
            }

        .btn .caret {
            margin-left: 160px;
            margin-bottom:5px;
        }
    }  

Html：

<td class="col-xs-2">
    <am-multiselect class="sv-manage-multiselect-dropdown"    
                    ng-model="Mylist.names"
                    options="Names.name for link in Mylist"
                    multiple="true"    
                    ms-selected="{{Mylist.names}}"                        
     </am-multiselect>        

</td>

在：

在：

Answer 1

您是否尝试在css中使用max-width？

max-width: 40px;

例如。

希望这有帮助！

Answer 2

我查看了angular-multiselect / src / multiselect.tmpl.html，添加此css应该可行，10px仅用于示例，放置复选标记的宽度和高度，如此<i>将填充相同的位置即使它是无效的：

.sv-manage-multiselect-dropdown {
    ul.dropdown-menu > li > i{
        display: inline-block;
        min-width: 10px;
        min-height: 10px;
    }
}