父元素内子元素的两行排列
如何实现父元素内子元素的两行排列，超出时隐藏部分，点击按钮时出现横向滚动条？
实现原理
代码示例
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";
};要点：
以上就是如何实现父元素内子元素两行排列，超出部分隐藏，点击按钮显示横向滚动？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
142
收藏
