解决办法，给display：inline-block的父元素上加font-size:0;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{ padding: 0; margin:0; } ul{font-size:0;}/*这里可以显示或隐藏来看效果*/ li{list-style: none;} li{ height:30px; display: inline-block; width: 25%; font-size: 12px; text-align: center; border:1px solid yellow; box-sizing: border-box;/*给行内边框，不会影响width：25%*/ } li:nth-child(even){background-color:red;} li:nth-child(odd){background-color:black;} </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
未添加font-size：0：如下图：
添加font-size：0后，如下图：
