Heim > Artikel > Web-Frontend > So implementieren Sie horizontales Scrollen von Elementen mithilfe von CSS
Das Scrollen erfolgt, wenn die Breite des untergeordneten Elements größer ist als die des übergeordneten Elements. Überlauf-x: Scrollen ist horizontales Scrollen hier je nach Bedarf.
(Teilen von Lernvideos:
CSS-Video-Tutorial<div class="content"> <div class="content-list"> <div class="item" style="margin-right:10px;"> <div class="amount"> <span>2</span>元 </div> <div class="fundInfo"> <p class="name">XXXXXX</p> <p>满1000元可用</p> </div> </div> <div class="item" style="margin-right:10px;"> <div class="amount"> <span>2</span>元 </div> <div class="fundInfo"> <p class="name">XXXXXX</p> <p>满1000元减200</p> </div> </div> </div> </div>
Haupt-CSS-Code:
.content { width: 100%; overflow-x: scroll; // 子元素的宽度大于父元素的即可滚动 overflow-y: hidden; border-radius: 4px; } .content::-webkit-scrollbar { display:none } // 隐藏滚动条 .content-list{ display: -webkit-flex; display: -ms-flexbox; display: flex; float: left; // 使其脱离文档流 宽度为所有字元素的和 min-width: 100%; } .item { width: 150px; height: 50px; display: -webkit-flex; display: -ms-flexbox; display: flex; flex: 3; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 10px; }
Verwandte Empfehlungen:
CSS-TutorialDas obige ist der detaillierte Inhalt vonSo implementieren Sie horizontales Scrollen von Elementen mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!