Question

我想要一个包含在标题div中的列表：

<div id="header">
    <div id="menu">
        <ul>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
        </ul>
    </div>
</div>

我的问题是标题div不包含菜单div。

我对div的理解是包含div y的div x将包含div y中的所有元素。但事情并没有发生。

将包含div的高度设置为x像素仅适用于调整浏览器大小。当浏览器变得足够小时，li元素不再包含在包含div中。无论浏览器有多小，我都希望标题中包含li元素。

这是我的CSS代码：

#header{
    background-color: orange;
    border-bottom: 1px solid gray;
    width: 100%;
    height: 50px; /*removing results in none of the menu items being contained */
}   
li{
    float: left;
    padding: 10px;
    list-style:none;
}

Answer 1

以下代码可以。您应该添加overflow:hidden;

#header{
    background-color: orange;
    border-bottom: 1px solid gray;
    width: 100%;
    overflow:hidden; }

Answer 2

这就是你想要的......

这不需要使用float。 display: inline;对于这类事情是完美的。使用您勾选为正确的方法不是一个好的举动。 DEMO HERE

HTML：

<div id="header">
    <div id="menu">
        <ul>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
            <li>link</li>
        </ul>
    </div>
</div>

CSS：

#header{
    background-color: orange;
    border-bottom: 1px solid gray;
    width: 100%;
    height: auto;
}

li{
    display: inline;
    padding: 10px;
    list-style:none;
}

Answer 3

不要为外部容器设置高度删除元素的高度：#header

示例：

#header{
    background-color: orange;
    border-bottom: 1px solid gray;
    width: 100%;
    float:left;
  //  height: 50px; /*removing results in none of the menu items being contained */
}

li{
    float: left;
    padding: 10px;
    list-style:none;
}

请参阅工作示例Here

包含div不包含列表

3 个答案:

HTML：

CSS：