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

导航条,宽度刚刚好为窗口宽度,并且随着,宽度缩小而缩小。当窗口宽度缩小到一定程度(最小宽度)时,导航条宽度不再缩小。导航条中间导航内容,随着窗口缩小,而实现居中,知道达到... 导航条,宽度刚刚好为窗口宽度,并且随着,宽度缩小而缩小。
当窗口宽度缩小到一定程度(最小宽度)时,导航条宽度不再缩小。
导航条中间导航内容,随着窗口缩小,而实现居中,知道达到最小宽度。
如何实现,上述功能,请详细说一下怎么用div+css布局实现它?
展开
 我来答
anginwei
推荐于2017-09-28 · 超过12用户采纳过TA的回答
知道答主
回答量:13
采纳率:0%
帮助的人:18.4万
展开全部

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%是相对于父元素的百分比大小

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式