本文主要是介绍li标签间的空白问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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; }
这篇关于li标签间的空白问题解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
