Question

<html>
<head> 
    <style>
        ul{
            list-style-type:none;
            font-size:0px;
            letter-spacing:10px;
        }
        li{
            display:inline-block;
        }
    </style>
</head>
<body> 
    <ul>
        <li><img src="photo.jpg"></li>
        <li><img src="photo.jpg"></li>
        <li><img src="photo.jpg"></li>
        <li><img src="photo.jpg"></li>
        <li><img src="photo.jpg"></li>
    </ul>
</body>
</html>

在Firefox，Chrome和IE中有所不同。在Firefox中，当我使用font-size:0px和letter-spacing:10px时，<li>元素的字母间距为10px，但在Chrome和IE中它不起作用，为什么会这样？

Answer 1

由于列表中只有图像，请尝试将CSS更改为：

ul, ul li {
    list-style-type:none;
    padding: 0;
    margin: 0;
}

Answer 2

我会使用word-spacing属性，而不是letter-spacing;）

font-size：0px和letter-spacing：10px在不同浏览器中的显示方式不同

2 个答案: