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