div が水平に整列しないのはなぜですか?どうすれば修正できますか?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-11-03 04:01:02

オリジナル

1068 人が閲覧しました

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 サイトの他の関連記事を参照してください。