0

当我缩小浏览器时，标题和导航栏不会延伸到浏览器的末尾。当我缩小浏览器时，它看起来像这样。我希望标题和导航栏一直延伸到浏览器的末尾。 收缩时

当浏览器被拉伸时，没关系！ 浏览器展开时

这是我的html代码：

<body>

<div id="header">
Some text
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</body>

这是它的CSS：

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 100px;
     background: black;
     height:54px;
}

#nav li {
     float: left;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     margin-right: 94px;
     text-decoration: none;
}

如果你能告诉我我做错了什么，我将不胜感激。我也在使用 Eric Meyer 的重置。

4

3 回答 3

3

试试这个

#header{
    margin:0;
    background: white;
    height:90px;
    min-width:960px;
    width:100%;
}

在这里你可以指定min-width:--;

于 2013-02-16T05:02:26.240 回答
2

使用百分比间距更新列表的css，如下所示。

/* CSS Document */
body {
background:red; 
}

#header{
    margin:0;
    background: white;
    height:90px;
    width:100%;
}


#nav {
    /* margin: 0px auto;*/
     padding-left: 10%;
     background: black;
     height:54px;
}

#nav li {
     float: left;
    padding-right:9%;
}

#nav li a {
     color: lime;
     font-size: 20px;
     font-weight: bold;
     line-height: 54px;
     text-decoration: none;
    display:block
}

这是演示：http: //jsfiddle.net/vYgs5/

于 2013-02-16T05:06:24.373 回答
1

我建议让您的网站改为响应式，@Naveen 答案非常有帮助，但您要记住为所有设备编辑响应式 css 样式，例如：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
于 2013-02-16T06:01:45.410 回答