问题总结:
1、ul要比外套div宽度的值大一点
2、ul需要往左移动1px
3、外套的div设置overflow隐藏
解决抖动:
1、li宽度设置98px,padding左右值1px,hover之后宽度不变,padding清零
2、li宽度设置100px,hover之后宽度设为98px
bug问题:
外套div如果宽度500px,内部5个小盒子宽度需要比100px宽点,下面设置的是102px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
500px;
height: 100px;
margin: 100px auto;
border: 1px solid #ff0000;
overflow: hidden;
}
ul {
list-style: none;
510px;
margin-left: -1px;
}
li {
float: left;
102px;
height: 40px;
font: 400 13px/40px "simsun";
cursor: pointer;
text-align: center;
}
li:hover {
100px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
color: #f40;
}
</style>
</head>
<body>
<div>
<ul>
<li>商品</li>
<li>商品</li>
<li>商品</li>
<li>商品</li>
<li>商品</li>
</ul>
</div>
</body>
</html>
