Question

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

当浏览器被拉伸时，它没关系！ When browser is expanded

这是我的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的重置。

Answer 1

试试这个

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

您可以在此处指定min-width:--;

Answer 2

按如下所示更新 css of list with percentage 。

/* 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/

Answer 3

我建议让你的网站响应，@ 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 */
}

收缩时无法让页面显示全宽

3 个答案: