本文演示如何使用HTML、CSS和JavaScript创建一个父元素，其子元素整齐排列成两行，并通过按钮点击展开隐藏内容，最终显示水平滚动条。这在处理大量信息时非常实用。
HTML结构:
我们使用一个div作为父容器（container），包含另一个div（flex-container）来容纳子元素（item）。最后，添加一个按钮（more）控制内容展开。
item1item2item3item4item5item6item7item8item9item10...
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，才能触发水平滚动条。
