在写列表的过程中遇到一个问题类似下面的图片，当元素排满时隐藏，并且可以通过左右按钮使里面的元素左右移出。
由于前端知识匮乏，遇到了一些问题
1、方法一
外部的div的宽度是固定不变的，里面的元素的个数不是固定的，当内部所有元素的个数的宽度超出外部div的时候，元素会向下排列，而且并不隐藏，下图是内部li未超出父级宽度的情况
当元素超出时就会向下排列
解决办法
给父级元素添加如下代码white-space: nowrap;
并且让内部li为display: inline-block;
此时就不会向下排列，并且出现横向滚动条可以左右滑动
示例代码
<!DOCTYPE html>
<html>
<head>
<style>
#pic_list {
position: absolute;
top: 300px;
left: 400px;
display: block;
white-space: nowrap;
width: 500px;
overflow: auto;
/* 隐藏滚动条条 */
/*overflow-x: hidden; !*横向滚动*!*/
/*overflow-y: auto;!*纵向滚动*!*/
background-color: burlywood;
}
#pic_list li {
width: 80px;
height: 30px;
background: red;
display: inline-block;
border-radius: 10px;
}
</style>
</head>
<div id="pic_list">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
但是此时，横向滚动条并不好看，因此需要寻找更加好的方法。
1、方法二
创建两个 div 内部一个外部一个，内部使用绝对定位外部使用相对定位，然后创建两个按钮，当点击按钮的时候，去改变内部的div的left和right属性值。
这样的话就避免了横向滚动条的出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#ul-content {
position: absolute;
white-space: nowrap;
}
#ul-content li {
margin: 10px;
width: 80px;
height: 30px;
background: red;
display: inline-block;
border-radius: 10px;
}
#div-view {
position: relative;
margin: 200px auto;
height: 50px;
width: 500px;
line-height: 30px;
text-align: center;
background-color: olivedrab;
overflow: hidden;
}
button {
position: absolute;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div id="div-view">
<ul id="ul-content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<button class="left" type="button">左移动</button>
<button class="right" type="button">右移动</button>
</div>
</body>
</html>
然后通过js去操作left属性就可以了
<script>
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var ul = document.getElementById('ul-content');
var left_position = ul.offsetLeft;
var tid;
left.onmousedown = function () {
tid = setInterval(function () {
left_position -= 1;
ul.style.left = left_position + 'px';
}, 1)
};
left.onmouseup = function () {
clearInterval(tid);
};
right.onmousedown = function () {
tid = setInterval(function () {
left_position += 1;
ul.style.left = left_position + 'px';
}, 1)
};
right.onmouseup = function () {
clearInterval(tid);
};
</script>