0

我有一个非常简单的布局，你可以在这里看到

<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>

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

我该如何摆脱它们？

4

9 回答 9

3

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

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

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

float:left;而不是display:inline;在你的 CSS

正如其他人所建议的那样，有负边距等的解决方法，但这是执行您所要求的通常方法。

于 2013-07-26T14:37:24.457 回答
3

只需删除display:inline-block列表项上的并浮动它们即可。

ul.mm_sortable_items li { 
    float:left;
}
于 2013-07-26T14:37:39.227 回答
2

添加这个CSS

.mm_sortable_items {
    font-size: 0;
}

由于您的内联块元素 (LI) 之间存在空格。有几种方法可以修复它，您可以删除空格但很难阅读。你也可以在 li 上做负边距，但我个人喜欢 font-size 0 因为你没有文本

于 2013-07-26T14:36:51.680 回答
1

你有以下

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

只需添加

float: left;

在ul.mm_sortable_items li.

于 2013-07-26T14:40:51.823 回答
0

我会有使用table的反射，每个图像都有一行和一个单元格（特别是因为它们的大小相同）。然后，您可以使用 与图像相同的基本 CSS来设置单元格的大小，这样它们之间就没有空格。

于 2013-07-26T15:04:33.070 回答
-1

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

于 2013-07-26T14:37:57.307 回答
-1

向选择器添加 float:left; 规则 ul.mm_sortable_items li 。

于 2013-07-26T14:38:40.597 回答
-2

在 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...

向左浮动可能被认为是更正确的方法。

于 2013-07-26T14:41:37.420 回答
-3

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

letter-spacing: -4px;

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

于 2013-07-26T14:38:19.383 回答