41

リスト項目間の空白を取り除くにはどうすればよいですか? 画像が隣同士になるように作ろうとしています。スタイルを に設定しましたmargins: 0;が、まだ分離されています。

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>
4

8 に答える 8

103

2014 年 9 月 1 日更新

最新のブラウザーでは、フレックスボックスがこれを行うための推奨される方法です。次のように簡単です。

ul {
  display: flex;
}

ここで JSFiddle を参照してください。

従来のブラウザーのサポートについては、以下の他のオプションを参照してください。これらは、多少複雑ではありますが、問題ありません。

他の回答のそれぞれが少なくとも 1 つの適切な解決策を提供しますが、すべての可能性を提供するものはないようです。そして、それが私がここでやろうとしていることです。

まず、なぜ間隔があるのか​​という暗黙の質問に答えるために、インライン要素として表示するように LI を設定しているため、間隔があります。

inline私が知っているすべてのブラウザで、テキストと画像のデフォルトの表示値です。インライン要素は、コードに空白がある場合は常に、それらの間にスペースを空けてレンダリングされます。これは、テキストに関しては良いことです。入力したこれらの単語は、コードに含まれているスペースのために間隔が空けられています。また、各行の間にスペースがあります。まさにこのインライン要素の動作こそが、Web 上のテキストをまったく読みやすくするものです。

しかし、この表示スタイルの他のプロパティをinline利用するために、非テキスト要素が必要になる場合があります。これには通常、テキストとはまったく異なり、要素をぴったりと合わせたいという欲求が含まれます。そして、それがあなたの問題のようです。

これ以上苦労することなく、スペーシングを取り除くために私が知っているすべての方法を次に示します。

それらをインラインに保つ

  1. (非推奨) LI に負のマージンを適用して、LI を移動します。

    li { margin: -4px; }

スペースのサイズを「推測」する必要があることに注意してください。以下のコメントで Arthur が見事に指摘しているように、ユーザーはブラウザーのズームを変更でき、コードのレンダリングが台無しになる可能性が高いため、これはお勧めしません。さらに、このコードには当て推量と計算が多すぎます。すべての条件下で機能する、より優れたソリューションがあります。

  1. 空白を取り除く

    <li>One</li><li>Two</li>

  2. コメントを使用して空白をコメントにしますJSFiddle

    <li>One</li><!--
--><li>Two</li>

  3. 終了タグをスキップ ( HTML4 有効/ HTML5 有効) JSFiddle

    <li>One
<li>Two

  4. タグ自体に空白を入れます (注: 初期の Internet Explorer はこれを好まないでしょう) 。

    <li>One</li
><li>Two</li
>

  5. 要素間の間隔が親のフォント サイズのパーセンテージとして計算されるという事実を利用してください。したがって、親のフォント サイズを 0 に設定すると、スペースがなくなります。liテキスト自体のフォント サイズがゼロ以外になるように、ゼロ以外のフォント サイズを設定することを忘れないでください。JSFiddle で表示します。

それらを浮かべる

  1. 代わりにそれらを浮かべてください。これを行う場合、おそらく親を clearfix したいと思うでしょう。

    li { float: left; display: block; }
于 2013-01-05T16:25:16.003 に答える
30

信じられないことですが、この問題の適切な解決策を提供した人は誰もいません。

これを行うだけです：

ul.frames {
  font-size: 0;
}
ul.frames li {
  font-size: 14px; font-size:1.4rem;
  display: inline;
}

マークアップを変更するためのアクセス権が常にあるとは限らないことに注意してください。<li>また、ソリューションが単純な 2 つのfont-sizeプロパティである場合、JavaScriptで s からスペースを削除しようとする必要はまったくありません。

また、<li>s をフローティングすると、別の潜在的な問題が発生します。リスト項目を中央揃えおよび右揃えにすることができなくなります。

float:right;sで実行しようとすると<li>、順序が入れ替わります。つまり、リストの最初の項目が最後になり、2 番目の項目が最後の項目の前になる、というようになります。

SO: A Space between Inline-Block List Items のこの他の投稿をチェックしてください。

于 2013-08-28T05:32:18.817 に答える
3

次のように、ul タグ内のすべてのスペースを削除する必要があります: http://jsfiddle.net/dFRYL/3/

要素はインラインであるため、<li>要素内または要素間にスペースを書き込むと、スペースが表示されます。

于 2013-01-05T16:21:08.290 に答える
1

次のように負のマージンを使用できます。

margin-right: -4px;
margin-bottom: -4px;

ここを見てください。

上下にも機能します。ここに示すために別のものを追加しました。

于 2013-01-05T16:18:04.433 に答える
0

これが私の試みです。それが役に立てば幸い。Sean Dunwoody が述べたように、html の空白がスペースの原因になる可能性がありますが、li をフロートさせ、画像を display:block; にしました。変更した場所についてコメントを残しました。それが役立つことを願っています: http://jsfiddle.net/FJ3nV/

ここで私の小さいながらも主な変更点：

/*
* Added float left
*/
ul.frames  li {
  margin: 0;
  list-style: none; 
  float:left;
}

/* 
*  Moved inline sizing here just to clear up obtrusive html.
*  Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}
于 2013-01-05T17:42:08.890 に答える
0

を使用display:inline;すると、HTML を表示するときに HTML 内の空白が作成されます。

これには 2 つの解決策があります。

1) インラインで表示する方法を変更します。すべてのリスト項目でフロートを使用してから、並べ替えの clearfix を使用することをお勧めします。

2) リスト項目間のすべての空白を削除します。

<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>

個人的にはオプション1をお勧めします（私は嫌いですdisplay: inline）

于 2013-01-05T16:22:44.290 に答える