Question

我想制作一个彩色背景的菜单。我在包含菜单的div上使用简单的“背景”或“背景颜色”但我看不到任何颜色。我知道这是愚蠢但我真的被卡住了..

这是HTML：

 <header class="menu-top">
    <div class="menu">
        <ul>
            <li><a>Home</a></li>
            <li><a>Portfolio</a></li>
            <li><a>Contact</a></li>
        </ul>
    </div>
</header>

这是JSFIDDLE：https://jsfiddle.net/szf1xksv/

Answer 1

由于菜单中的列表项已浮动，菜单将失去其高度。您需要在容器后清除浮动。一种简单的方法：

.menu:after {
  content: "";
  display: table;
  clear: both;
}

Updated fiddle.

Answer 2

另一种方法是使用：

.menu > ul > li {
  display: inline-block;
}

这将保留列表项的高度。

背景div菜单问题

2 个答案: