上周，因为要用到可以横向滚动，不能出现滚动条的样式，网上搜了一圈也没有点想要的效果，干脆去偷一个~
先预览下效果吧
Vs
ok，上代码~
HTML:
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo-tab"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="items"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item-on"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">calss</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="item"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>CSS:
<span style="color: #800000;">.demo-tab</span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;">fixed</span>;<span style="color: #ff0000;">
bottom</span>:<span style="color: #0000ff;">41px</span>;<span style="color: #ff0000;">
overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">主要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">主要</span><span style="color: #008000;">*/</span>
}<span style="color: #800000;">
.demo-tab ul</span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">60px</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">主要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;">#e8e8e8</span>;<span style="color: #ff0000;">
overflow-x</span>:<span style="color: #0000ff;">scroll</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">主要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
overflow-y</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">主要</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
white-space</span>:<span style="color: #0000ff;">nowrap</span>;
}<span style="color: #800000;">
.item</span>{<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;">33.3333333%</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;">10px 0</span>;<span style="color: #ff0000;">
font-size</span>:<span style="color: #0000ff;">18px</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;">#9c9c9c</span>;
}<span style="color: #800000;">
.item-on</span>{<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;">12px</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;">#04be02</span>;
}总结一下，其实就是外层的div的高度要比里层ul/div或者其它元素的高度小，然后overflow:hidden
这是目前已知的一种，也许还会有其它方法吧，希望这个方法能对dev有帮助。
美图，请欣赏，缩小尺寸了~
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
370
收藏
