Question

我有以下代码：

<div id="header">
  <h1>HEADER TEXT</h1>
  <div id="members">
    <form action="" method="post">
    <input type="text" value="Search this site" />
    </form>
    <a href="#">Member Login</a>
    </div>
  <div id="nav">
  <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
    </div>
</div>
<div id="main">

</div>
</body>

这是CSS：

<style>
body {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 16px;
    background-color: #EEE;
    color: #111;
    margin: 0;
    padding: 0;
}
h1 {
    display:inline;
    margin:0;
    padding:0;
    color:#000;
}
#header {
    position:fixed;
    width:100%;
    min-width:100%;
    background-color:#EEE;
}
#members {
    position:absolute;
    right:.5em;
    bottom:3em;
    margin: 0;
    padding: 0;
}
#members form {
    display: inline;
    margin: 0;
    padding: 0;
}
#nav {
    border-bottom:1px solid #3d5086;
    font-size:13px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    height: 3.5em;
    border-top: 1px solid #7683c4;
    background-color: #44529C;
    width: 100%;
    min-width: 100%;
    overflow: hidden;
}
#nav ul {
    padding:0;
    margin:0;
}
#nav li {
    display:inline;
    list-style-type:none;
    margin:0;
    cursor:pointer;
    border-left: 1px solid #7085ba;
    border-right: 1px solid #3d5086;
    float: left;
    height: 2.5em;
    padding-top: 1em;
    text-shadow: 1px 1px 1px #111;
}
#nav li:hover {
    background-color:#5a64b3;
    color:#FFF;
}
#nav a {
    padding: 1.6em;
    color: #EEE;
    text-decoration: none;
}
#main {
    background:#FFF;
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
</style>

我遇到的问题是，如果我将窗口缩小得足够小，那么#nav中的链接就会消失（或者如果溢出没有被隐藏，它会被推到下一行）。我不能指定#nav的宽度，因为我需要背景扩展100％。这有一个简单的解决方案吗？另一个小问题是，如果窗口缩小得足够小，h1和#members div不重叠，是否可以这样做？谢谢你的任何建议！

Answer 1

尝试将min-width设置为仍然显示正常的最小尺寸。

Answer 2

将display:inline放在#nav和/或#header

中

css修复标头溢出？

2 个答案: