html - 如何为下拉列表的 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;