博客主要探讨了li与li之间出现看不见的空白间隔的原因，即浏览器会将inline内联元素间的空白字符渲染成空格，换行字符会变成空格占用宽度。同时给出了四种解决办法，如设置浮动、写在同一行等，并指出了每种方法存在的不足。
li 与 li 之间有看不见的空白间隔是什么原因引起的？
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>如何解决？
1.为<li>设置float:left：
不足：有些容器是不能设置浮动，如左右切换的焦点图等
li { float: left; }
2.将所有<li>写在同一行：
不足：代码不美观。
li { display: inline; }
3.将<ul>内的字符尺寸设为0：
不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
ul { font-size: 0; }
li { font-size: 16px; /* 重新设置字符尺寸 */ }
4.消除<ul>的字符间隔并将<li>的字符间隔设为默认：
不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。
ul { letter-spacing: -8px; }
li { letter-spacing: normal; }
扫一扫
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
