问题总结:
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>