如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)
本章给大家介绍用css实现横向滚动条的两种方式。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
html代码:
- 全部
- Adobe
- 微软
- 会计
- 绘画
- Adobe
- 微软
- 会计
- 绘画
一、 原始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个像素。
如何将横向滚动条加粗css,css实现横向滚动条的两种方式(代码实例)相关推荐
- java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
- css文字溢出省略号设置的两种方式
1.多行文本 display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; 2.通 ...
- Cesium加载模型两种方式
Cesium加载模型两种方式 代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
- 产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
- html语言 加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
- CSS实现多栏布局的几种方式
css实现多栏布局的几种方式 假如把下面的三个div显示在同一行 <div id="parent"><div id="box1">1&l ...
- css字体倾斜角度_css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码实例)...
在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观.那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实 ...
- 通过CSS实现 文字渐变色 的两种方式
说明 这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键. 解释 方式一 效果图 代码 <!DOCTYPE html> < ...
- 两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中.或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的.但是有的时候,这种效果我们并不想要的,比如用户点快了的时候, ...
最新文章
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
- gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'
- DATAGUARD STANDBY 服务器归档日志管理
- lambdas for_借助Java 8和lambdas,可以一起使用AssertJ和Awaitility
- AI应用开发基础傻瓜书系列2-神经网络中反向传播与梯度下降的基本概念
- VMware支持客户构建多云未来
- Linux启动SAP服务,sap启动相关
- 在Azure Cloud Service中部署Java Web App(1)
- GB28181---XML解析
- 刷题记录 CF每日一题打卡 2020.6月7-6月13
- 选课系统软件功能测试报告,学生选课系统测试报告.doc
- html5 keygen 作用,html keygen标签怎么用
- sqli-labs注入特色分类教程1-15【手动注入与sqlmap全面双解】
- 原理图端口符号_200 一步步开始学习制作PCBamp;PCBA--绘制原理图
- 五个强盗分金币的问题分析(博弈论)
- 分享几个IP获取地理位置的API接口
- 职教平台粉笔科技递交港股IPO招股书:2021年1-9月营收26.3亿
- 检测你的黑苹果系统主板是否支持原生NVRAM
- u-boot 学习系列 1 - SPL
- python解决凯撒密码