html - CSS:我如何正确地做这个菜单？

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

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

1) 从#header中移除固定的height 2) 添加overflow: hidden到#header

fiddle :http://jsfiddle.net/u32HL/

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

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

编辑:

如果您希望内容在用户增加字体大小时“像图像一样缩放”(如评论中所述)，请为您的容器提供固定宽度:

fiddle :http://jsfiddle.net/u32HL/1/

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

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

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