首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >行内块列表项之间的空格

行内块列表项之间的空格
EN

Stack Overflow用户
提问于 2011-03-10 15:08:23
回答 8查看 177.8K关注 0票数 170

可能重复:

Unwanted margin in inline-block list items

How to remove “Invisible space” from HTML

为什么行内块列表项中有空格?无论我如何将我的列表项添加到菜单中,我总是会得到空格。

代码语言:javascript
复制
li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}
代码语言:javascript
复制
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2011-03-10 15:22:53

我以前见过并回答过这个问题:

further research之后,我发现inline-block是一个依赖于空格的方法,并且依赖于字体设置。在这种情况下,将渲染4px。

为了避免这种情况,您可以在一行中一起运行所有的li,或者像这样一起阻止结束标记和开始标记:

Example here

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

代码语言:javascript
复制
ul {
    font-size: 0;
}

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

这对于HTML的可读性更好(避免将标签放在一起运行等)。间距效果是由于字体的间距设置造成的,因此您必须为内联元素重置它,并为其中的内容重新设置它。

票数 251
EN

Stack Overflow用户

发布于 2012-05-18 23:24:05

解决方案:

代码语言:javascript
复制
ul {
    font-size: 0;
}

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

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

票数 168
EN

Stack Overflow用户

发布于 2011-07-24 11:43:45

我将添加浮动向左的CSS属性,如下所示。这就消除了额外的空间。

代码语言:javascript
复制
ul li {
    float:left;
}
票数 18
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5256533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档