A space between inline-block list items

Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML

Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.

li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}


ul {
padding: 0;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

180657 次浏览
小开
最佳答案

我以前见过这个并且回答过它:

在 进一步研究之后 发现 inline-block是一个 空格相关的方法和 取决于字体设置。在这种情况下呈现4px。

为了避免这种情况，你可以运行你所有的 将 li放在一行或块中 结束标签和开始标签放在一起 像这样:

<ul>
<li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li>
</ul>

这里的例子 。

正如其他回答和评论所提到的，解决这个问题的最佳实践是将 font-size: 0;添加到父元素中:

ul {
font-size: 0;
}


ul li {
font-size: 14px;
display: inline-block;
}

这有利于提高 HTML 的可读性(避免一起运行标记等)。间距效应是由字体的间距设置引起的，因此您必须为内联元素重置间距，并为内部内容重新设置间距。

小开

我会添加如下所示的 float 的 CSS 属性，这样就可以去掉额外的空间。

ul li {
float:left;
}
小开

解决方案:

ul {
font-size: 0;
}


ul li {
font-size: 14px;
display: inline-block;
}

必须将父字体大小设置为0

小开

实际上，这并不是特定于 display:inline-block的，但也适用于 display:inline。因此，除了大卫•霍拉克(David Horák)的解决方案之外，这种方法也是有效的:

ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline;
}
小开

只需删除 HTML 代码中 li 之间的间隔..。 让 Li 只在一条线上。

小开

另一个解决方案，类似于 格布斯的解决方案，但这也适用于相对字体大小。

ul {
letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
display: inline;
letter-spacing: normal; /* Reset letter-spacing to normal value */
}
小开

即使它不是基于 inline-block的，这个解决方案也值得考虑(允许从上层进行几乎相同的格式控制)。

ul {
display: table;
}
ul li {
display: table-cell;
}
小开

我也遇到了同样的问题，当我在菜单上使用行内块时，我在每个“ li”之间留出了空间，我找到了一个简单的解决方案，我不记得在哪里找到的了，不管怎样，这就是我所做的。

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

在每个结尾之间添加一个注释符号，并从“ li”开始 然后水平空间消失。 希望这个问题的答案 谢谢


提交答案