ホームページ > 記事 > ウェブフロントエンド > インラインブロックのwhitespace_html/css_WEB-ITnoseのレイアウトに影響する問題
インラインブロックのwhitespace_html/css_WEB-ITnoseのレイアウトに影響する問題
- WBOYオリジナル
- 2016-06-24 11:31:02980ブラウズ
昨日ページを切り取ってレイアウトをしていたときに、気分転換に以下のメソッドを変更したくなり、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 />
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。