网站导航栏做法汇总

最新推荐文章于 2024-04-14 12:10:13 发布

weixin_44099111

最新推荐文章于 2024-04-14 12:10:13 发布

阅读量898

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44099111/article/details/89403889

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

网站导航条的通常需求有：

在页面中水平居中；
宽度和内容区一样，例如1200px；
导航菜单项平均分布在导航条当中，并且两端对齐。（主要是这一条较为需要斟酌如何实现）

目前总结的几种实现方法：

将<li>标签设置float:left。【不足】：需要精确计算<li>的宽度。如果每个<li>的字数一样，可以通过导航条宽度除以菜单项数量，得到width。如果字数不一样，则只能设置margin、padding等，需要仔细调试。并且如果<li>的数量或字数一旦发生变化，就要重新计算一次。
将<li>标签设置display: inline-block。【不足】：跟采用float方法一样，同样存在宽度需要精确计算的问题。并且inline-block存在一个间距的问题，详见 https://www.cnblogs.com/gavinzzh-firstday/p/5710712.html 。
将<ul>设置display: table; ，<li>设置display: table-cell。【优点】<li>宽度能自适应。不过记得要给<ul>显式地设定 width: 100%。
将<ul>设置display: flex; justify-content: space-between;，然后给<li>设置一个较大的宽度（例如，有5个<li>，则至少设置width:20%，否则菜单之间有间距。设置li{width:100%;}也能实现）。【优点】<li>宽度能自适应。

个人推荐：table方法 > flex方法 > float方法 > inline-block方法。

测试代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  html,body,ul,li{padding:0; margin:0;}
  .box{position: absolute; top: 0; bottom: 0; left:50%; margin-left: -600px; 
       width:1200px; background-color: #ccc; z-index: -999;}
  nav{margin:100px 0;height: 50px; background-color: #f54343; width: 100%;}
  .wrap{margin: 0 auto; width: 1200px;}
  ul, li{list-style: none;}
  li{text-align: center; color:#fff; font-size: 18px; line-height: 50px;}
  li:hover{background-color: #e53333;}
  
  .float-list li{float:left; width:9.090909%; }

  .inlineblock-list li{display: inline-block;width:9.090909%;}

  .table-list ul{display: table; width: 100%;}
  .table-list li{display: table-cell;}

  .flex-list ul{display: flex; justify-content: space-between;}
  .flex-list li{width:100%;}
</style>
</head>
<body>

  <div class="box"></div>

  <nav>
    <div class="float-list wrap">
      <ul>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
      </ul>
    </div>
  </nav> 
  <nav>
    <div class="inlineblock-list wrap">
      <ul>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
      </ul>
    </div>
  </nav>  
  <nav>
    <div class="table-list wrap">
      <ul>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
      </ul>
    </div>
  </nav>  
  <nav>
    <div class="flex-list wrap">
      <ul>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
        <li>汽车</li>
      </ul>
    </div>
  </nav>    
</body>
</html>

weixin_44099111

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
网站导航栏做法汇总

网站导航条的通常需求有：在页面中水平居中；宽度和内容区一样，例如1200px；导航菜单项平均分布在导航条当中，并且两端对齐。（主要是这一条较为需要斟酌如何实现）目前总结的几种实现方法：将<li>标签设置float:left。【不足】：需要精确计算<li>的宽度。如果每个<li>的字数一样，可以通过导航条宽度除以菜单项数量，得到width。...
复制链接

扫一扫