0

我正在尝试使用 bootmetro 框架在我的标题中定义两个菜单。第一个是我的主菜单，第二个是我的用户菜单。

由于某种原因，第二次菜单显示错误，菜单项的行间距太大。

用于创建菜单的代码如下所示

<div class="dropdown">
    <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
        Actions
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li class="divider"></li>
        <li><a href="#">item4</a></li>
    </ul>
</div>

我遇到的问题显示在下面的屏幕截图中。在我的第二个菜单中，菜单项没有完整的菜单。

更新：

问题似乎出在 bootmetro CSS 样式表中，并且 firebug 缩小了搜索范围（感谢 Thanh Trung！）。在检查模式下，我可以清楚地看到 a href 没有填充我的第二个菜单中的菜单项 (li)，而它确实占用了我的第一个菜单中的最大宽度。

bootmetro CSS 中的部分如下所示：

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

附加问题：这个“>”是什么原因？我以前从未见过。

在这两个菜单中，都使用了 CSS 类“下拉菜单”，但是，当我删除这个 CSS 类的主体时，只有第一个菜单会相应地发生变化。

主要问题：那么为什么这个类没有被我的第二个菜单项正确继承？

再次为完整起见，第二个菜单（显示工件的菜单）的 HTML 代码：

<div class="dropdown pull-left">
        <a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
            <b class="icon-settings"></b>
        </a>
        <ul class="dropdown-menu pull-right">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#">Log out</a></li>
        </ul>
    </div>

菜单 1

正确可视化的菜单

菜单 2

错误的可视化菜单

菜单 3

检查：“a”未取全宽

菜单 4

检查：列表项占全宽度

4

1 回答 1

1

因为代码是一样的，但是显示的时候有区别，说明是css影响了。没有给我们css，就不可能说出问题所在。

以下是可能影响元素总高度的 css 属性：height、line-height、padding、margin。

您可以使用 Firebug 或 Chrome 检查器来检查元素以查看其样式

更新

bootmetro.css 2018 行正在影响（覆盖）它

#top-info a {
   display: inline-block;
   height: 46px;   /**** should be removed or override *****/
   color: #5A5A5A;
}

另外我建议你使用 Firebug（firefox 的一个插件）来检查元素，不要使用 Firefox 的检查器

于 2013-01-12T14:25:11.683 回答