Question

我有一个非常简单的布局，你可以看到它here

<html>
<head>
    <style>
        html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
            margin: 0;
            padding: 0;
        }

        ul.mm_sortable_items {
            list-style: none;
        }

        ul.mm_sortable_items li {
                display:inline-block;
                margin: 0;
        }

        ul.mm_sortable_items a {
                display: block;
                width: 100%;
        }
    </style>
</head>
<body>
    <div class="mm_quicksand_container">            
        <ul class="mm_sortable_items">
            <li class="game_filter_1" id="game_8"><a href="#"><img src="images/itg_0.png"/></a></li>
            <li class="game_filter_1" id="game_9"><a href="#"><img src="images/piu.png"/></a></li>
            <li class="game_filter_2" id="game_10"><a href="#"><img src="images/default.png"/></a></li>
            <li class="game_filter_2 game_filter_3" id="game_11"><a href="#"><img src="images/cam-teng.png"/></a></li>
        </ul>
    </div>
</body>
</html>

我希望图像彼此相邻，中间没有空格。据我所知，我目前所拥有的应该是这样，但相反，图片之间存在这些差距。

我如何摆脱它们？

Answer 1

你确实在它们之间放置了空格。如果删除空格，图像将会合在一起。

display:inline-block显示元素，就好像它们是内联的一样。换句话说，图像之间的换行符被视为空格。

您可以使用以下方法解决此问题：

float:left;而不是CSS中的display:inline;

正如其他人所建议的那样，有一些带有负边距等的解决方法，但这是通常的做法。

Answer 2

只需移除列表项中的display:inline-block并将其浮动即可。

ul.mm_sortable_items li { 
    float:left;
}

Answer 3

添加此css

.mm_sortable_items {
    font-size: 0;
}

由于内联块元素（LI）之间的空格。有几种方法可以解决它，你可以删除空格，但它很难读。你也可以在li上做负余量，但我个人喜欢font-size 0，因为你还没有文字

Answer 4

您有以下

ul.mm_sortable_items li {
    display: inline-block;
    margin: 0;
}

添加

float: left;

ul.mm_sortable_items li中的

。

Answer 5

我会有使用table的反射，每个图像会有一行和一个单元格（特别是因为它们的大小相同）。然后你可以使用basic CSS和图像的大小来制作单元格的大小，这样它们之间就没有空格了。

Answer 6

我的标记中有空格以保持整洁。浏览器将其渲染为每个图像之间的单个空间。糟糕。

Answer 7

添加一个 float:left; 统治到 ul.mm_sortable_items li 选择器。

Answer 8

CSS中有两个选项

选项1：

ul.mm_sortable_items li {
margin-right:-4px;
your other CSS here...

选项2：

ul.mm_sortable_items li {
float:left;
your other CSS here...

左边的Float可能被认为是更合适的方法。

Answer 9

HTML中的图像默认为内联元素。这意味着图像被认为等同于文本中的字母。因此，每个图像之间有一个空格，等于字母之间的空格。要删除图像之间的空间，您需要在图像的容器上使用此CSS属性：

letter-spacing: -4px;

这将使你的图像粘在一起。

为什么这些图像之间有空格？

9 个答案: