web-dev-qa-db-ja.com

インラインブロックリストアイテム間のスペース

可能性のある複製：
インラインブロックリストアイテムの不要なマージン
HTMLから「見えないスペース」を削除する方法

インラインブロックリストアイテムにスペースが含まれているのはなぜですか？リストアイテムをメニューにする方法に関係なく、常にスペースが確保されます。

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}
ul {
  padding: 0;
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
htmlcssxhtml
165
Tyler Crompton

私はこれを見て、それに答えました：

さらなる研究 の後、inline-blockは空白に依存するメソッドであり、フォント設定に依存していることを発見しました。この場合、4pxがレンダリングされます。

これを避けるには、すべてのlisを一緒に1行で実行するか、次のように終了タグと開始タグを一緒にブロックします。

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

ここの例 。

他の回答とコメントで述べたように、これを解決するためのベストプラクティスは、font-size: 0;を親要素に追加することです。

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

これは、HTMLの読みやすさ（タグを一緒に実行するなどを回避する）に適しています。間隔効果はフォントの間隔設定によるものであるため、インライン要素に対しては間隔をリセットし、その中のコンテンツに対しては再度設定する必要があります。

243
Kyle

溶液：

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

親フォントサイズを0に設定する必要があります

167
David Horák

下に示すように、フロートのCSSプロパティを左に追加します。それは余分なスペースを取り除きます。

ul li {
    float:left;
}
18
Trevor G

実際、これはdisplay:inline-blockに固有のものではなく、display:inlineにも適用されます。したがって、DavidHorákのソリューションに加えて、これも機能します。

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}
17
Gerbus

Gerbus 'solution に似た別のソリューションですが、これは相対的なフォントサイズ設定でも機能します。

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}
5
Leo Pitt

私は同じ問題を抱えていました。メニューでインラインブロックを使用したとき、各「li」の間にスペースがあり、簡単な解決策を見つけました、どこで見つけたのか覚えていません、とにかくここで私がやったことです。

<li><a href="index.html" title="home" class="active">Home</a></li><!---->
<li><a href="news.html" title="news">News</a></li><!---->
<li><a href="about.html" title="about">About Us</a></li><!---->
<li><a href="contact.html" title="contact">Contact Us</a></li>

コメント記号を各末尾と先頭の間に追加します： "li"その後、水平方向のスペースが消えます。質問への回答ありがとうございます

3
Fabien

あなたのhtmlコードでli間の区切りを削除するだけです... liを1行だけにしてください。

2
Mya

inline-blockベースではない場合でも、このソリューションは検討する価値があるかもしれません（上位レベルからのほぼ同じフォーマット制御が可能です）。

ul {
  display: table;
}
ul li {
  display: table-cell;
}
0
Frosty Z