如何用HTML、CSS和JavaScript实现父元素中子元素的两行排列及展开显示横向滚动条？

本文演示如何使用HTML、CSS和JavaScript创建一个父元素，其子元素整齐排列成两行，并通过按钮点击展开隐藏内容，最终显示水平滚动条。这在处理大量信息时非常实用。

HTML结构:

我们使用一个div作为父容器（container），包含另一个div（flex-container）来容纳子元素（item）。最后，添加一个按钮（more）控制内容展开。

  
    
item1
    
item2
    
item3
    
item4
    
item5
    
item6
    
item7
    
item8
    
item9
    
item10
    
...
  

登录后复制

CSS样式:

立即学习“Java免费学习笔记（深入）”；

我们利用Flexbox布局实现两行排列。flex-wrap: wrap;允许子元素自动换行；justify-content: space-around;使子元素均匀分布。初始状态下，父容器隐藏水平滚动条（overflow-x: hidden），点击按钮后，修改class属性显示滚动条（overflow-x: scroll）。

#container {  width: 400px;  height: 200px;  border: 1px solid red;  position: relative;}#container.hidden {  overflow-x: hidden;  overflow-y: hidden;}#container.scroll {  overflow-x: scroll;  overflow-y: hidden;}#flex-container {  width: 800px; /* 宽度大于父元素，模拟内容溢出 */  height: 200px;  background: pink;  display: flex;  flex-wrap: wrap;  justify-content: space-around;}.item {  width: 150px;  text-align: center;  background: yellow;  height: 94px;}#more {  display: block;  position: absolute;  top: 160px;  right: 10px;  z-index: 5;  width: 80px;  height: 30px;  background: green;  border-radius: 5px;  text-align: center;  color: white;  cursor: pointer;}

登录后复制

JavaScript交互:

点击“…”按钮时，隐藏按钮并修改父容器的class，显示水平滚动条。

document.getElementById("more").onclick = function() {  this.style.display = "none";  document.getElementById("container").className = "scroll";};

登录后复制

通过以上HTML、CSS和JavaScript代码，即可实现所需效果。 请确保#flex-container的宽度大于#container，才能触发水平滚动条。

以上就是如何用HTML、CSS和JavaScript实现父元素中子元素的两行排列及展开显示横向滚动条？的详细内容，更多请关注【创想鸟】其它相关文章！