大家可能在ul搭配li里面遇到过这样的问题，如果想让li全部一行排列，一种方法是浮动，另一种是给li添加display: inline-block但是这个东西存在间隙
问题如图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
height: 300px;
background-color: blue;
margin: 100px auto;
}
ul li{
background-color:red;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>131</li>
<li>3123</li>
<li>123</li>
<li>123</li>
<li>1231</li>
</ul>
</body>
</html>
间隙大概是4px左右，针对这种问题，我给大家列举几种可靠的办法。
方法一
ul和li结构是这样的：
<ul>
<li>
123</li><li>
i3123</li><li>
312</li><li>
1233</li><li>
3123</li>
</ul>
效果如下：
方法二
代码：
<ul>
<li>3211</li
><li>i3122</li
><li>3123m3</li
><li>31234</li
><li>3125</li>
</ul>
效果如下：
这种排列方式和第一种基本是一致的，只是说结束标签的“>”成了另一行的起始标签。
方法三
结构如下：
<ul><li>32131</li><li>3123</li><li>3123</li><li>3123</li><li>3123</li></ul>
效果如下：
这样让他们都排列成一行，可以说是比较常用的办法了，比前两种好一点。
方法四
丢失标签
直接上代码：
<ul>
<li>dwa
<li>daw
<li>daw
<li>daw
<li>dwad
</ul>
效果：
这还是来源于html代码不严谨，但是XHTML就不一样了，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。
方法五
margin为负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
height: 300px;
background-color: blue;
margin: 100px auto;
}
ul li{
background-color:red;
display: inline-block;
margin-left:-5px;//这里是让每个li向左进行5px的移动
}
</style>
</head>
<body>
<ul>
<li>dwa</li>
<li>daw</li>
<li>daw</li>
<li>daw</li>
<li>dwad</li>
</ul>
</body>
</html>
效果如图：
很明显，li虽然已经解决了间隙的问题但是相对于ul已经出去了一点，而且在实际的开发当中还需要调节ul的位置，可能会影响到布局，这个还和字号有关系，个人还是不建议这种办法
方法六
利用给父级font-size:0；解决问题
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
height: 300px;
background-color: blue;
margin: 100px auto;
font-size:0;/*给父级设置字体大小为0，如果不给子级单独设置字体大小字体是不会显示的*/
}
ul li{
background-color:red;
display: inline-block;
font-size: 15px;/*单独给子级设置大小为15px*/
}
</style>
</head>
<body>
<ul>
<li>dwa</li>
<li>daw</li>
<li>daw</li>
<li>daw</li>
<li>dwad</li>
</ul>
</body>
</html>
效果如下：
这个方法兼容ie，谷歌，火狐浏览器，但是不兼容safari，在其中还是会存在间隙的问题，这样就需要用letter-spacing:-Npx 来兼容safari,N的数值还是要根据字号的大小进行设置调整
方法七
letter-spacing: -Npx;解决问题
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 300px;
height: 300px;
background-color: blue;
margin: 100px auto;
letter-spacing: -4px;
font-size:0;/*给父级设置字体大小为0，如果不给子级单独设置字体大小字体是不会显示的*/
}
ul li{
background-color:red;
display: inline-block;
font-size: 15px;
letter-spacing:normal;
}
</style>
</head>
<body>
<ul>
<li>dwa</li>
<li>daw</li>
<li>daw</li>
<li>daw</li>
<li>dwad</li>
</ul>
</body>
</html>
效果：
在当前元素的父元素中设置letter-spacing:-4px;其作用是可以控制文字间的水平距离，给子级设置letter-spacing:normal;是为了防止因为父级的-4px影响到子级的字体排列
但是具体的letter-spaceing:Npx;里面数值的大小还是要根据不同的字号进行调整
以上7种就是我总结的解决间隙问题的方法了
还有两点注意事项
1.在html代码中除去当前元素的空格或换行，该方法太麻烦，而且影响HTML代码的可读性，不赞成，后期代码维护起来还有改代码的时候可能会出现一系列的问题。
2.在当前元素的父元素中设置font-size:0;有可能在chorme中不支持，最好还是搭配上给父级设置letter-spacing:-4px;解决问题最好
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
