2

可能重复：
内联块列表项中不需要的边距
如何从 HTML 中删除“不可见空间”

我有<ul>多个<li>孩子。

li's 只包含一个图像，我删除了它们的所有边距。我也调用display:inline-block;了它们，所以它们现在显示在一行中。

但是，s 的右侧仍有一小段余量li。我发现这是换行符，如果我删除它，边距就会消失。但是，如果我必须删除所有换行符，那将是非常不可读的。

你能给我一个解决方案吗？

HTML

<ul>

    <li><a href="#"><img src="image1.png" alt="post_heart" /></a></li>
    <li><a href="#"><img src="image2.png" alt="post_repeat" /></a></li>
    <li><a href="#"><img src="image3.png" alt="post_tag" /></a></li>
    <li><a href="#"><img src="image4.png" alt="post_share" /></a></li>

</ul>

较少的

ul {
    display:inline;
    padding:none;
    margin:none;

    li {
        display:inline-block;

        padding:none;
        margin:none;

        a {
            display:block;  
            margin:none;
            border-right: 1px solid #e0e1e2;

            &:hover {
                .linearGradient(transparent, rgba(0,0,0,0.05));
            }
        }

        &:last-child {
            a {
                border:none;
            }
        }
    }
}
4

3 回答 3

4

“边距”实际上是空格（制表符、空格或换行符的某种组合）。您可以通过将其注释掉来保留格式。

<ul><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
    --><li><img /></li><!--
--></ul>

另见： http ://css-tricks.com/fighting-the-space-between-inline-block-elements/

于 2013-01-23T18:35:37.793 回答
2

确保在 li 上没有边距。

我还使用 inline-block 遇到了这个问题，在你的标记中，你不能在 li 元素之间有任何空白，否则它会呈现它。看起来丑陋，但工作。

例如这个

<ul>
<li></li><li></li><li></li><li></li><li></li><li></li>
</u>

而不是这个

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
于 2013-01-23T18:34:27.303 回答
0

只是让他们float:left。我认为当它们display:inline存在时，总会有大约 3px 的空间。

于 2013-01-23T18:34:35.487 回答