1

我有以下代码：

<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 不重叠？感谢您的任何建议！

4

2 回答 2

3

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

于 2012-06-16T21:50:47.937 回答
0

放入display:inline#nav 和/或#header

于 2012-06-16T21:52:35.413 回答