内嵌块列表项之间的空格

可能重复:
内嵌块列表项中的不需要的边距
如何从HTML中删除“隐形空间”

为什么内联块列表项中有一个空格? 无论我如何将列表项目放入菜单,我总是会得到空格。

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> 

我已经看到了,并在之前回答:

经过进一步的研究,我发现inline-block是一个依赖于空白的方法,依赖于字体设置。 在这种情况下,4px被渲染。

为了避免这种情况,您可以将所有的内容一起放入一行,或者封闭结束标签,并像这样开始标记:

 <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可读性更好(避免一起运行标签等)。 间距效果是由于字体的间距设置的,所以您必须重置内联元素并将其重新设置为内容。

解:

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

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

我将添加float的左侧的CSS属性,如下所示。 这摆脱了额外的空间。

 ul li { float:left; } 

实际上,这不是特定的display:inline-block ,但也适用于display:inline 。 因此,除了DavidHorák的解决scheme之外,这也适用于:

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

另一个解决scheme,类似于Gerbus的解决scheme ,但是这也适用于相对字体大小。

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

我有同样的问题,当我在菜单上使用内联块时,每个“李”之间有空格,我find了一个简单的解决scheme,我不记得我在哪里find它了,无论如何,这是我做的。

 <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”然后水平空间消失。 希望这个问题的答案谢谢

只是删除你的HTML代码中的李之间的rest…只在一行中的李..

即使它不是基于inline-block ,这个解决scheme可能值得考虑(允许从上层几乎相同的格式控制)。

 ul { display: table; } ul li { display: table-cell; } 
  • IE8 +与主stream浏览器兼容
  • 相对/固定字体大小无关
  • 独立的HTML代码格式(无需粘贴</li><li>