诡异的间隙inline-block

最新推荐文章于 2024-09-09 21:34:46 发布

my_coding2015

最新推荐文章于 2024-09-09 21:34:46 发布

阅读量333

点赞数

分类专栏： Js+Html+css

本文链接：https://blog.csdn.net/my_coding2015/article/details/52206207

版权

Js+Html+css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在学习如何制作导航条，并不太喜欢使用float这种方法，因为带来的副作用有点大。毕竟float出现的本意是为了解决文字浮动的效果。所以我选择使用inline-block来让竖直的li列表变成水平状。
所以，问题产生了。

<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
li{
  background-color: blue;
  display: inline-block;
  margin: 0;
  padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
    <li><a href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

这样简单的一段代码却在li标签之间产生了一小段很诡异的间隙。打开chrome的开发者平台，并没有发现哪个属性对其产生了影响。正当困惑之际，我随手改变了一下li的代码书写。

<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
li{
  background-color: blue;
  display: inline-block;
  margin: 0;
  padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
    <li><a href="#">首　　页</a></li><li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

奇迹出现了…li之间的空隙居然消失了！直到此时才发现，原来这个间隙是由于html中的回车和空格造成的。但是由于语义化的要求和便于检查的目的，我们不可能将所有的li都排在一行。
那么有没有其他的办法来解决这个问题？
通过设置其父级元素的font-size为0也可以解决这个问题。

<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
ul{
  font-size:0;
}
li{
  background-color: blue;
  display: inline-block;
  margin: 0;
  padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
    <li><a href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>