横向条怎么出来?很多人肯定以为是:overflow-x:scroll;当然不是这么简单的,下面这篇文章主要给大家介绍了关于如何实现横向条的2种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言:

在项目开发中,遇到了一个需求,实现一行上的导航栏过多使其产生横向条。一开始做项目,给的时间太短又着急,觉得网上有现成的,去搜发现没有,只好自己去写,一开始用的是平常css+js实现功能,之后学习了flex布局,所以又想到了用flex实现横向条。两种方法,记录下来,供以后借鉴。

正文:

两种方法各有各的好处,如果不考虑兼容性问题,还是用flex吧,毕竟还是喜欢那一句话:Write Less,Do More。哈哈

html:

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">全部</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微软</li>
        <li class="nav_item">会计</li>
        <li class="nav_item">绘画</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>

一 原始css + jquery 实现横向条(原生js可以实现,为了方便才用的jQuery)

css:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}

js代码:

$(function(){
    var width = 0;
    for (let i = 0; i < $('.nav_item').length; i++) {
        width += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20);  //width只是内容的宽度,需要加上padding的宽度
})

PS:为什么用js,是因为不知道tabs有多少个,不能把宽度写死,只能动态获取tabs的宽度,然后相加,获取总宽度,方便多次使用。outerWidth加上参数true,代表包含了padding+margin+border的宽度。

二 css3  --  flex

css:

* {
    box-sizing: border-box;
}

.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}

对于white-space,item在没有用white-space:nowrap时,发现一个问题,在未设定宽度的情况下,一个单词不会换行,而汉字会换行,认为是和display:flex有关系,上网查阅,才知道:white-space是看空格来识别是否换行的,单词是作为一个字符,所以要针对于汉字和英文,都要设置white-space:nowrap不换行。因为汉字和英文的不同,导致所占的宽度不一致,所以要留1到2个像素。

对应的笔记和实例,我放到了GitHub,https://github.com/sqh17/notes(本地下载) 如果想实践可以去clone下来。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对爱安网的支持。

最新资讯
无人机"飞手"的一天:高薪只是传闻 入行必须能吃苦

无人机"飞手"的一天

无人机飞手这个看似酷炫的职业,背后则是飞手们顶着烈日
金山办公完成科创板上市问询 雷军系引发独立性质疑

金山办公完成科创板上

筹备近三年,历经多次搁浅,脱胎于港股上市公司金山软件(03
自动驾驶前途未卜:暖春与寒冬谁会先到?

自动驾驶前途未卜:暖春

可能只有少数初创企业能笑到最后。
鹏友,你为什么愤怒?

鹏友,你为什么愤怒?

当然,他们也可能只是装作不明白,毕竟造车烧钱,在新款交付
强烈建议苹果收购戴森,连iCar的工业设计都有着落了

强烈建议苹果收购戴森

为了延续统一的设计风格,实现平稳有序过渡,我们强烈建议
德国将Facebook旗下加密货币Libra视为对欧元的风险

德国将Facebook旗下加

德国将Facebook旗下加密货币Libra视为对欧元的风险。
最新文章
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合
element.style内联样式的修改方法教程

element.style内联样

这篇文章主要给大家介绍了关于element.style内联样式
图文实操详解前端处理小图标的那些解决方案

图文实操详解前端处理

在前端日常开发中,小图标是必不可少的,我们该如何高效的
深入理解::before/:before和::after/:after的使用

深入理解::before/:be

之前在网上总是可以看到::before :before ::after :af
利用.htaccess实现禁止某个IP访问网站的方法

利用.htaccess实现禁

这篇文章主要给大家介绍了关于利用.htaccess实现禁止