如何设置下拉列表的li元素的宽度？

Question

我正在尝试将自定义宽度设置为bootstrap下拉列表的li元素。 我尝试了堆栈溢出的各种解决方案，但没有一个在我的情况下工作。

• CSS list item width/height does not work
• can we assign width to li
• How to set the width of a list, in css
• How to force div element to keep its contents inside container 还有更多。

下拉列表的HTML：

<span title="Settings" class="dropdown pull-right label label-primary" style="margin-top: 2px;margin-left: -2px;">
    <span class="glyphicon glyphicon-cog dropdown-toggle pointer" data-toggle="dropdown"></span>
    <ul class="dropdown-menu">
       <li class="cancel-proj-job" data-href="#">
          <a href="#">Cancel Project Job</a>
       </li>
    </ul>
</span>

自定义CSS：

.jOrgbody div#grid_col_mid .open>ul.dropdown-menu {
   font-size: 8px;
   padding: 0;
}

.jOrgbody div#grid_col_mid ul.dropdown-menu li {
   padding: 0;
}

.jOrgbody div#grid_col_mid ul.dropdown-menu li>a {
   padding: 0;
   display: inline-block;
}

注意： 当我尝试将固定宽度应用于li时。它没用。

Answer 1

最简单的方法就是按照以下代码执行此操作：

<span title="Settings" class="dropdown pull-right label label-primary" style="margin-top: 2px;margin-left: -2px;">
<span class="glyphicon glyphicon-cog dropdown-toggle pointer" data-toggle="dropdown"></span>
<ul class="dropdown-menu">
   <li class="cancel-proj-job" data-href="#" style="width:300px;">
      <a href="#">Cancel Project Job</a>
   </li>
</ul>

将“width：300px”更改为您想要的任何长度。希望这有帮助。

编辑：我已经在我的浏览器中尝试了100px和300px，结果如下：

with width:100px; with width:300px;

Answer 2

我通过调试它的CSS找到了答案。基本上，引导程序为类min-width:160px设置了dropdown-menu。我覆盖了这个值，li元素开始获取自定义宽度。