首页 > 代码库 > 行内元素在水平和垂直排列的时候会有间距

行内元素在水平和垂直排列的时候会有间距

2024-08-18 22:23:35   238人阅读

解决办法，给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后，如下图：

技术分享

行内元素在水平和垂直排列的时候会有间距


联系
我们