ホームページ >ウェブフロントエンド >CSSチュートリアル >div が水平に整列しないのはなぜですか?どうすれば修正できますか?

div が水平に整列しないのはなぜですか?どうすれば修正できますか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-03 04:01:021083ブラウズ

Why are my divs not aligning horizontally and how can I fix it?

Div の水平方向の配置

何らかの理由で、div はコンテナ div 内で常に水平方向に配置されず、視覚的に望ましくないギャップが残ります。この問題は、float を使用して子 div を配置するときに発生する可能性があります。次の点を考慮してください:

<code class="css">.row {
  width: 100%;
  margin: 0 auto;
}

.block {
  width: 100px;
  float: left;
}</code>

このコードは、行 div 内で子 div を水平に配置することを目的としています。ただし、子 div が 1 つだけ含まれる行が存在する場合があり、その結果、ギャップが生じます。

これを修正する別のアプローチは、float の代わりに display: inline-block を使用することです。これにより、幅や高さなどのブロックのようなプロパティを維持しながら、水平方向の配置を実現できます。変更された CSS は次のとおりです:

<code class="css">.block {
  width: 100px;
  display: inline-block;
}</code>

以上がdiv が水平に整列しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。