不确定栏目数量的（多行）导航栏居中

Baoyuan 发布于2019-08-28 17:58 / 1274人阅读

摘要：代码隐藏最左侧元素的左边框代码导航最外层宽度每个栏目名称的宽度栏目数量每行最大数量可以按需调整根据栏目数量和宽度设置的宽度确定了的宽度，可以使用来实现整个的居中，在中使用负边距来隐藏最左侧标签的左边框。

DEMO：http://www.tinghaige.com/demo/uncertain-nav/
代码：
HTML代码

注：使用这种诡异的结构是为了消除inline-block的间距。
CSS代码：

  .nav {
    width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    border: 1px solid #000;
  }
  .nav_list {
    overflow: hidden;
    margin: 0 auto;
    height: auto;
    text-align: center;
  }
  .nav_list li {
    display: inline-block;
    border-left: 1px solid #000;
    width: 100px;
    background: #fff;
    text-align: center;
    margin-left: -1px; //隐藏最左侧元素的左边框
    margin-bottom: 5px;
  }

JS代码（Jquery）：

  var width_outer = $(".nav").width(); //导航最外层宽度
  var width_item = $(".nav_list li").width(); //每个栏目名称（）的宽度
  var count = $(".nav_list li").length; //栏目数量
  var num = width_outer / width_item; //每行最大数量（可以按需调整）

  if(count < num) {
    $(".nav_list").width(count * width_item) //根据栏目数量和宽度设置``的宽度
  } else {
    count = num;
    $(".nav_list").width(count * width_item)
  }

确定了

margin:0 auto

margin-left:-1px

云服务器 GPU云服务器 html的导航栏栏目文章数量不确定数据多少的类 html标题栏居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110926.html

水平、垂直居中方式总结

摘要：我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。不定宽块状元素水平居中我们来学习一下这种方法。我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:c...

陆斌 2019-08-30 12:49 评论0 收藏0
CSS居中那些事

摘要：定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示，然后使用来实现居中效果。做前端这一年多来，其实一直都是偏向于js前后端，css什么的总是抱着够用就好的心态，从来没有系统的学习或总结过，结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师，不能让css成为自己的短板，于是简单的总结一下，高手绕路。...

dingding199389 2019-08-30 13:13 评论0 收藏0
一个类似于京东Plus权益介绍的小功能

摘要：最近公司要开发一套线上付费的会员，是和原生一起混合式的开发，有一个会员权益模块是全部使用开发，想给大家看下需要做成的案例其实没什么难点，主要就是功能有顶部导航栏可以左右滑动，点击某一个栏目按钮内容跟着切换并且加载一次之后，第二次就重新加载被最近公司要开发一套线上付费的会员App，是和原生一起混合式的开发，有一个会员权益模块是全部使用H5开发，想给大家看下需要做成的案例： showIm...

acrazing 2019-08-26 13:36 评论0 收藏0
网页导航栏 html + css的代码实现

摘要：一般来讲，我们的网页导航栏是这么个模式来构建在结构上首先我们需要给导航栏的给个类名一般为然后就是一个无序表格由于导航栏的文字一般都是链接用来跳转页面要在里面包含一个首页云云商城智慧门店营销平台媒体联盟关于云道在样式上目前我见过的分为两种导航一般来讲，我们的网页导航栏是这么个模式来构建在结构上：1.首先我们需要给导航栏的div 给个类名一般为nav2.然后就是一个无序表格 3.由于导航栏的文...

keke 2019-04-23 11:55 评论0 收藏0