前端 | 关于水平导航栏间隙的解决办法

在做导航栏练习的时候，想实验一下把原先垂直的导航栏换位水平的导航栏；在设置完一众参数之后发现水平导航栏各链接之间的存在一个位的空隙总是抹不平，看了盒子模型也未有收获，索性上网搜了一下；原来问题出现在给<li>标签设置的display属性inline-block 上。

以下是代码：

  <nav>
    <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="rooms.html">Menu</a></li>
     <li><a href="directions.html">Directions</a></li>
     <li><a href="contact.html">Contact</a></li>
   </ul> 
  </nav>            

nav { 
  padding: 0;
  margin: 0;
  height: 60px; 
  font-weight: bold;
  letter-spacing: 0.1em; 
}

nav ul { 
  list-style-type: none;
  margin: 0;
  padding: 0;

}

nav ul li { 
  display: inline-block; 
  width: 140px;
  margin: 0;
  padding: 0;
}

nav a { 
  margin: 0;
  display: block;
  text-decoration: none; 
  background-color: #B3C7E6;
  text-align: center;
  padding: 20px;
  border-right: 1px solid #FFFFFF;
}

下面是关于inline-blcok 值的解释：

 来自： MDN 

---

怎么看待这个inlink-block呢，不如让我们做一个盒子模型的实验

/* html */
<div class="div d1"></div>
<div class="div d2"></div>
<div class="div d3"></div>


/* css */
.div {
	width: 80px;
	height: 80px;
	background-color: #99CC33;
	border:1px solid #ffffff;
	display: inline-block;
	box-shadow: 2px 1px 10px #CCCC99;
	display: inline-block;
}

效果如下： 

 我们知道div块状元素，转换为inline-block后，它们之间是存在有间隙的

 找到问题所在之后我们来看看解决方法：

nav ul li { 
  display: inline-block; 
  width: 140px;
  margin: 0;
  padding: 0;
  float: left;    //直接在li元素上添加float属性
}

此处也总结一下网上找到的其他方法：

1. 直接去掉内联块状元素之间的空格；
2. 在内联块状元素的父元素上添加属性 font-size：0（不过font-size 亲测无效，得找找原因）

网友blog传送门：

其他方式

关于inline/block/inline-block