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 に答える
-3

HTML の画像は、デフォルトではインライン要素です。これが意味することは、画像はテキスト内の文字と同等であると見なされるということです。そのため、各画像間には文字間のスペースと同じスペースがあります。画像間のスペースを削除するには、画像のコンテナーで次の CSS プロパティを使用する必要があります。

letter-spacing: -4px;

そうすることで、イメージがくっつきます。

于 2013-07-26T14:38:19.383 に答える