内联块列表项之间的空格 [英] A Space between Inline-Block List Items

问题描述

<块引用>

可能的重复:
内联阻止列表项中不需要的边距
如何从 HTML 中删除不可见空间"

为什么行内块列表项中有一个空格?无论我如何将列表项放入菜单中，我总是会有空格.

li {边框:1px纯黑色；显示:内联块；高度:25px；列表样式类型:无；文本对齐:居中；宽度:50px；}ul{填充:0；}

<li>一个</li><li>两个</li><li>三</li>

解决方案

我之前看过这个并回答过:

经过 进一步研究 我有发现 inline-block 是一个空白依赖方法和取决于字体设置.在这种情况下，渲染了 4px.

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

<块引用>

<li><div>先</div></li><li><div>先</div></li><li><div>先</div></li><li><div>先</div>

示例在这里.

<小时>

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

ul {字体大小:0；}乌利{字体大小:14px；显示:内联块；}

这对 HTML 可读性更好(避免将标签一起运行等).间距效果是因为字体的间距设置，所以你必须为内联元素重新设置它，并为里面的内容重新设置.

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>

解决方案

I have seen this and answered on it before:

After further research I have discovered that inline-block is a whitespace dependent method and is dependent on the font setting. In this case 4px is rendered.

To avoid this you could run all your lis together in one line, or block the end tags and begin tags together like this:

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

Example here.

---

As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

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

This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.

这篇关于内联块列表项之间的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！