碰到的问题：display:inline-block元素之间空隙的产生原因和解决办法
https://blog.csdn.net/qq_32614411/article/details/82223624
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change tab</title>
<style>
*{
padding: 0;
margin: 0;
}
.div{
position: absolute;
width: 800px;
left: 100px;
margin-top: 100px;
background: aqua;
}
ul {
width: 100%;
list-style: none;
display: table;
word-spacing:-1em;
}
li {
display: inline-block;
text-align: center;
width: 60px;
color: #000;
cursor: pointer;
margin: 0;
padding: 0;
}
.aaaa{
width: 100%;
height: 2px;
position: relative;
background: yellow;
}
.ppp{
width: 60px;
height: 2px;
background: #f00;
position: absolute;
left: 0;
top: 0;
transition: 0.4s all linear;
}
</style>
</head>
<body>
<div class="div">
<ul>
<li class="tab"> 张杰 </li>
<li class="tab">周杰伦</li>
<li class="tab">林俊杰</li>
<li class="tab">薛之谦</li>
<li class="tab">你</li>
</ul>
<div class="aaaa"><p class="ppp"></p></div>
</div>
</body>
<script>
var lis = document.getElementsByClassName('tab');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
var that = this;
document.getElementsByClassName('ppp')[0].style.left = lis[i].clientWidth * i + 'px'
}
}
</script>
</html>
