内联块列表项中的不需要的边距

Question

我有以下HTML:

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

以及以下css规则:

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

出于某些奇怪的原因,列表项在Firefox和Chrome中都会显示边缘.查看firebug,列表项目根本没有任何边距,但它们之间似乎存在空隙.

如果我稍后通过javascript使用添加更多列表项

$('<li><div>added via js</div></li>').appendTo($('ul'));

新元素周围没有出现"边距":

怎么知道这里到底发生了什么？

Answer 1

这是由于 display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

将其更改为float: left;.

我认为这是填充,但仔细看看,结果显示它是显示:)

这里的例子.

经过进一步的研究,我发现这inline-block是一个依赖于空白的方法,并在每个元素的右边渲染一个4px的边距.

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

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

这里的例子.

希望有帮助:)

Answer 2

我找到了一个很好的技巧来克服这个同样的问题.我的顶级菜单中的列表项在我删除"float:left;"之后每个都有空格边距.支持"display:inline-block;".

尝试将无序列表的字体大小设置为"0",即:

ul { font-size:0; }
li { font-size:18px; }

为我工作.

Answer 3

看到这篇文章和给出的答案,我想我会解释这里发生了什么.这不是错误,但实际上是内联块的预期行为.

说明为什么这是正确行为的最好方法是使用段落中的表情符号:

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

默认情况下,图像显示为内联块(IE:符合内联流的块元素 - 非常类似于单个文本字符).在这种情况下,你会希望两个表情贴在彼此旁边,但你仍然需要在'昨天'和第一个笑脸之间留一个空格.

希望这能解释它,并解释为什么inline-block需要很长时间才能得到全面支持; 实际上并没有很多用例按预期使用它.

要回答你的问题,最好的办法就是这样做:

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

Answer 4

在我看来,在这种情况下,最好的办法是删除li父母的字母间距并重新放在li!

所以你的CSS规则:

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

Answer 5

删除所有</li>标签.我不知道为什么,但这可以解决您的保证金问题.

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