前端 | 关于水平导航栏间隙的解决办法（解决内联元素的间隙问题）

最新推荐文章于 2023-01-02 21:27:42 发布

严肃脸

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量5k

点赞数

分类专栏： CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/Ian_ruo/article/details/82531021

版权

在尝试将垂直导航栏改为水平导航栏时，遇到内联元素间存在空隙的问题。问题根源在于`<li>`标签的`display: inline-block`属性。解决方案包括：1) 设置`float: left`；2) 去除HTML空格或使用注释；3) 设置`margin-right: -4px`；4) 移除`</li>`闭合标签；5) 设置`font-size: 0`（不适用于有文字的场景）。还可以考虑使用`display: block`结合`float: left`作为替代方案。

摘要由CSDN通过智能技术生成

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