インラインブロックのwhitespace_html/css_WEB-ITnoseのレイアウトに影響する問題-htmlチュートリアル-php.cn

インラインブロックのwhitespace_html/css_WEB-ITnoseのレイアウトに影響する問題

WBOY

リリース： 2016-06-24 11:31:02

オリジナル

972 人が閲覧しました

昨日ページを切り取ってレイアウトをしていたときに、気分転換に以下のメソッドを変更したくなり、floatメソッドを放棄してdisplay:inline-blockメソッドを採用することにしました。意味のない問題は空白です。早速、コードに入りましょう。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css">    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head>  <body>    <ul class="box">        <li>li</li>        <li>li</li>        <li>li</li>        <li>li</li>    </ul></body></html>

ログイン後にコピー

効果は上の図のようになり、各 li の間にスペースが入り、ページのレイアウトに影響します。

1. 理由

inline-block で横方向に表示される要素の間に改行やスペースがあると、要素間に隙間ができてしまいます。

2. 解決策

1. 要素間の空白または改行を削除します。マージンマイナスマージンを使用します

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css">    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head>  <body>    <ul class="box">      <strong> <li>li</li><li>li</li><li>li</li><li>li</li></strong>    </ul></body></html><br /><br /><br />

ログイン後にコピー

3.空白文字も文字であるため、親要素のフォントサイズを 0 に設定し、子要素でフォントサイズを再定義できます。ただし、このメソッドは Safari では無効です。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css">    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head>  <body>    <ul class="box">        <li>        li</li><li>        li</li><li>        li</li><li>        li</li>    </ul></body></html>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<br />

ログイン後にコピー

4. 文字間隔を使用する

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css">    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head>  <body>    <ul class="box">        <li>li</li        ><li>li</li        ><li>li</li        ><li>li</li>    </ul></body></html><br /><br />

ログイン後にコピー

5. 単語間隔を使用する

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>inline-block的空白符</title><style type="text/css">    li{ width:50px; height:20px; background-color:#C90; display:inline-block;}</style></head>  <body>    <ul class="box">        <li>li</li><!--        --><li>li</li><!--        --><li>li</li><!--        --><li>li</li>    </ul></body></html><br /><br /><br />

ログイン後にコピー