包含 <ul> 的 <div> 的背景颜色 [重复]

Question

我使用<ul> 和inline-block 显示样式在HTML 中创建了一个水平导航菜单。我想设置包含<div> 的背景颜色，但它不起作用。就好像<div> 没有环绕<ul>。

第一个<div> 应该设置页面该部分的整个宽度的背景颜色。第二个<div> 然后设置该区域内导航菜单的宽度，并将<div> 居中，以便未使用的空间均匀分布在两侧。

代码如下：

<div style="background-color: #302683">
    <div style="margin: 0 auto; width: 80%">
        <ul style="padding: 0; margin: 0">
            <li style="display: inline-block; float: left"><a href="#design" title="Design" style="text-decoration: none; color: #FFFFFF; display: inline-block; text-align: center; padding: 20px">Design</a></li>
            <li style="display: inline-block; float: left"><a href="#proofreading" title="Proofreading" style="text-decoration: none; color: #FFFFFF; display: inline-block; text-align: center; padding: 20px">Proofreading</a></li>
        </ul>
    </div>
</div>

另外，我如何将<ul> 居中在第二个<div> 中，以便<li>s 出现在中心？

Answer 1

这应该可以工作：<div style="background-color: #302683; overflow: hidden;">

查看示例：http://jsfiddle.net/b8q836zs/1/

溢出：隐藏|自动将使元素建立一个'新块 格式化上下文' - 一个隔离的容器，它将阻止它 流入前面的浮动所占据的空间——见：CSS 2.1 - floats。