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

【问题标题】：How to set width for li element of a dropdown?如何为下拉列表的 li 元素设置宽度？
【发布时间】：2017-03-02 02:39:55
【问题描述】：

我正在尝试将自定义宽度设置为引导下拉菜单的 li 元素。我尝试了各种有关堆栈溢出的解决方案，但在我的情况下都没有。

下拉列表的 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.它没有用。

【问题讨论】：

能否为您的代码创建 Jsfiddle？
@Pirate 我将尝试创建它的 jsfiddle

标签： html css

【解决方案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 nnd 结果如下：

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

【讨论】：

我尝试将固定宽度应用于 li 但没有帮助。
@NuttyProgrammer 你能添加你更新的代码，这样我就可以看到它，因为当我在浏览器中尝试它时它对我有用。

【解决方案2】：

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

【讨论】：