|
前言
橫向滾動(dòng)需求很常見，實(shí)現(xiàn)起來也很容易。
如下圖所示，PC 端是用鼠標(biāo)拖動(dòng)滾動(dòng)條，H5 移動(dòng)端是手指滑動(dòng)：
解決方案
上述效果圖的完整代碼如下，一鍵復(fù)制運(yùn)行起來即可。
核心三要素：
父元素設(shè)置 width: 100%，橫向滾動(dòng) overflow-x: scroll
父元素不換行 white-space: nowrap
子元素設(shè)置為行內(nèi)塊級(jí)元素 display: inline-block
<section class="content">
<div class="item">充數(shù)內(nèi)容</div>
<div class="item">充數(shù)內(nèi)容</div>
<!-- 自行復(fù)制上面的充數(shù)內(nèi)容(讓容器溢出即可) -->
</section>
.content {
background: rgb(196, 196, 196);
width: 100%;
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
.item {
display: inline-block;
background: #fff;
margin: 10px;
width: 100px;
height: 100px;
}
SEO
CSS - 實(shí)現(xiàn)橫向滾動(dòng)（橫向滾動(dòng)布局），css橫向滾動(dòng)布局，css實(shí)現(xiàn)元素橫向滾動(dòng)的方法css中如何實(shí)現(xiàn)橫向滾動(dòng)布局，純CSS實(shí)現(xiàn)橫向滾動(dòng)條，橫向不間斷滾動(dòng)DIV CSS代碼，純CSS3橫向滾動(dòng)條實(shí)現(xiàn)。
————————————————
版權(quán)聲明：本文為CSDN博主「王佳斌」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44198965/article/details/126456914
|
