举下面这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
nav a {
display: inline-block;
padding: 5px;
background: red;
}
</style>
<body>
<nav>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
</body>
</html>
效果图：
spaces.png
接下来将讨论如何将图片衔接在一起。在导航的情况下，它可以避免小的不可点击的间隙。
一.删除空格
空格产生原因：在元素之间有空格（一个换行符和几个制表符被视为一个空格。
解决方案：
<!--法一-->
<nav>
<ul>
<li>
<a href="#">One</a></li><li>
<a href="#">Two</a></li><li>
<a href="#">Three</a></li>
</ul>
</nav>
<!--法二-->
<nav>
<ul>
<li><a href="#">One</a></li
><li><a href="#">Two</a></li
><li><a href="#">Three</a></li>
</ul>
</nav>
<!--法三，推荐-->
<nav>
<ul>
<li><a href="#">One</a></li><!--
--><li><a href="#">Two</a></li><!--
--><li><a href="#">Three</a></li>
</ul>
</nav>
二.设置负边距
nav ul li{
display: inline-block;
margin-right: -5px;
background: red;
}
在较老的浏览器有问题，但可保持代码格式。
三.跳过结束标记
<nav>
<ul>
<li><a href="#">One</a>
<li><a href="#">Two</a>
<li><a href="#">Three</a>
</ul>
</nav>
虽然有效，但看着很奇怪。
四.直接用float实现
ul {
position: relative;
left: 50%;
top: 0;
padding: 0;
margin: 0 auto;
display: block;
float: left;
clear: right;
list-style: none;
background: red;
}
li {
position: relative;
right: 50%;
top: 0;
padding: 10px;
display: block;
float: left;
border: 1px solid black;
}
body {
padding: 20px 0 50px 0;
background: pink;
border: 20px solid white;
}
五。直接用flexbox实现
nav ul{
display: flex;
padding: 5px;
}
li{
list-style: none;
background: slategrey;
display: inline-block;
/* inline block hack for IE 6&7 */
zoom: 1;
*display: inline;
padding: 4px;
color: white
}
