Question

我是CSS中的菜鸟，我在一些论坛上搜索了我的问题的解决方案，但我什么也没找到。

当我最小化此页面或我缩放页面（或两者）时，列表项从正常位置出来。

我有2个div：菜单左边1个，图像右边1个。两者都在标题div内。

我希望标题中的这2个div，当我最小化页面和/或缩放它时，不要退出标题div！

这是我的2个div的CSS代码：

#header {
    width: 100%;
    height: 150px;
    background: #111122;
    margin-bottom: 25px;
    color: #eeeeee;
    text-align: center;
}

#header #logo{
    width:50%;
    height:auto;
    float: right;
    margin-top: 35px;
}

#header #nav {
    width:50%;
    height:auto;
    float:left;
    font-size: 25px;
    margin-top: 70px;
}

ul{
    width:100%;
    height:auto;
}

#header #nav ul li {
    list-style-type: none;
    display: inline;
    padding: 8px 10px 8px 10px;
    background: #aabbff;
    border-radius: 4px;
    margin-left: 10px;
}

这是我的HTML代码：

<div id="header">

    <div id="logo">
        <a href="home.html"><img src="images/logo.png" width="200px"></a>   
    </div>

    <div id="nav">
        <ul>
            <li><a href="home.html">HOME</a></li>
            <li><a href="home.html">ABOUT</a></li>
            <li><a href="home.html">CONTACTS</a></li>
        </ul>
    </div>

</div>

如果格式不合适，请抱歉。

你能帮助我吗？

Answer 1

从标题中删除高度，然后创建一个clearfix CSS类并添加标题，例如

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}

.clearfix:after {
    clear: both;
}

将标题html更改为：

<div id="header" class="clearfix">

Answer 2

我不确定我是否完全理解你的问题。但是，如果你问如何防止元素溢出其父容器：

1）从height中删除已修复的#header 2）将overflow: hidden添加到#header

小提琴：http://jsfiddle.net/u32HL/

#header {
    width: 100%;
    overflow: hidden;
    background: #111122;
    margin-bottom: 25px;
    color: #eeeeee;
    text-align: center;
}

现在标头容器始终至少与其内容一样高。

编辑：

如果您希望内容“像图像一样缩放”，因为用户会增加字体大小（如评论中所述），那么请为容器指定固定宽度：

小提琴：http://jsfiddle.net/u32HL/1/

#header {
    width: 800px;
    overflow: hidden;
    background: #111122;
    margin-bottom: 25px;
    color: #eeeeee;
    text-align: center;
}

但请注意，这是不响应。如果用户的屏幕分辨率低于您设置宽度的屏幕分辨率，则您的内容将离开屏幕。移动用户会看到您网站的“缩小版”，并且必须捏缩放以阅读您的内容。

更好的方法是使用媒体查询来确保您的内容在每个屏幕宽度都很好。

CSS：我如何正确地执行此菜单？

2 个答案:

编辑：