网页导航条宽度随着浏览器窗口大小而自适应,用div+css应该怎么写?麻烦说明一下思路

导航条,宽度刚刚好为窗口宽度,并且随着,宽度缩小而缩小。
当窗口宽度缩小到一定程度(最小宽度)时,导航条宽度不再缩小。
导航条中间导航内容,随着窗口缩小,而实现居中,知道达到最小宽度。
如何实现,上述功能,请详细说一下怎么用div+css布局实现它?

html:

<nav>
  <ul>
    <li>home</li> 
    <li>about</li> 
  </ul>   
</nav>

css:

nav {
  width:100%;
  min-width:960px;
}
ul {
 display:block;
 margin:0 auto; 
}
ul li {
 float:left;
}

追问

我试了一下,中间导航的内容没有居中啊?就是“home”“about”没有随着窗口变小,而自动调节居中的位置。哪里出现问题了?

还有想问一下,如果在导航外面套一个width:1000px的div,那么nav的width:100%,任然是窗口大小么?还是变成了1000px.

追答<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   nav {
    width: 100%;
    min-width: 960px;
   }
   ul {
     width: 300px;
     height: 30px;
    margin: 0 auto;
    background-color: #F00;
   }
   ul li {
    float: left;
    width: 100px;
   }
  </style>
 </head>
 <body>
  <nav>
   <ul>
    <li>home</li>
    <li>about</li>
   </ul>
  </nav>
 </body>
</html>

对UL设一个尺寸就可以了,width:100%是相对于父元素的百分比大小

温馨提示:答案为网友推荐,仅供参考
相似回答