Question

我使用<ul>和内联块显示样式在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>出现在中心？

Answer 1

这应该有效：<div style="background-color: #302683; overflow: hidden;">

请参阅示例：http://jsfiddle.net/b8q836zs/1/

溢出：隐藏|自动会使元素建立一个新块格式化上下文＆＃39; - 一个隔离的容器，可以防止它流入前面浮动所占据的空间 - 见：CSS 2.1 - floats。

包含<ul> </ul> </div>的<div>的背景颜色

1 个答案: