如何实现父元素内子元素两行排列，超出部分隐藏，点击按钮显示横向滚动？

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《如何实现父元素内子元素两行排列，超出部分隐藏，点击按钮显示横向滚动？ 》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

父元素内子元素的两行排列

如何实现父元素内子元素的两行排列，超出时隐藏部分，点击按钮时出现横向滚动条？

实现原理

1. 初始状态：父元素设置隐藏溢出内容，子元素超出的部分被隐藏。
2. 点击按钮：点击“更多”按钮时，触发脚本将父元素的溢出改成水平滚动，显示超出部分。

代码示例

HTML：

<div id="container">
  <div id="flex-container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <!--更多子元素-->
    <div id="more">...</div>
  </div>
</div>

CSS：

#container {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  overflow-x: hidden;
}

#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：

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

要点：

• 父元素使用隐藏溢出的样式，初始隐藏超出的子元素。
• 更多按钮使用绝对定位，并添加事件监听器，点击时触发滚动。
• 脚本将父元素的溢出样式改为水平滚动，显示隐藏的内容。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~