inline-block div のラップを防ぐにはどうすればよいですか?

CSS では、子要素の表示を設定するために「display」属性が使用されます。 display プロパティに "inline-block" の値を設定すると、すべての子要素が並べて表示されます。さらに、十分なスペースが見つからない場合には、子要素が自動的にラップされるため、レスポンシブなデザインが自動的に作成されます。

Web スペースを管理するために、子要素のラップをやめなければならない場合があります。この場合、CSS の「空白」プロパティを管理して、子要素のラップを回避できます。

＃＃＃文法＃＃＃

ユーザーは次の構文に従い、「空白」CSS プロパティを使用して、インライン ブロック div が折り返されないようにすることができます。

リーリー

上記の構文では、CSS_selector は、表示するように「inline-block」を設定したすべての子要素の親要素です。

インライン ブロック要素が折り返されないようにする方法を理解するために、次の例を見てみましょう。

例 1

以下の例では、「container」クラス名を含む親 div 要素を作成します。その後、親コンテナに 3 つの子要素を追加しました。それぞれに「inline-block-div」クラス名が含まれています。

CSS では、親コンテナには「white-space: no-wrap」CSS プロパティを使用し、すべての子要素には「display: inline-block」を使用します。さらに、他のいくつかの CSS プロパティを使用して div 要素のスタイルを設定します。

出力では、ユーザーはブラウザ ウィンドウのサイズを縮小してみて、インライン ブロック div 要素が折り返されないか、次の行に移動しないことを確認できます。

リーリー

例 2

以下の例では、異なるデータを含む複数のテーブルを追加しました。最初のテーブルには学校データが含まれ、2 番目のテーブルには AC データが含まれます。

両方のテーブルの表示をインライン ブロックと同等に設定して、Web ページ上で並べて表示します。さらに、「container」div 要素で「white-space」属性を使用します。

出力では、2 つのテーブルを並べて観察できます。ウィンドウ サイズを小さくすると、2 つのテーブル要素が折り返されないため、テーブルは次の行に進みません。

リーリー

例 3

以下の例では、インライン ブロック div 要素が条件付きで折り返されないようにする方法を示します。特定の条件下でインライン ブロック div 要素が折り返されないようにする必要がある場合は、JavaScript を使用できます。

JavaScript では、すべての div 要素にアクセスし、forEach() メソッドを使用してすべての div 要素を反復処理します。スタイル オブジェクトの "whitespace" プロパティを使用して、すべてのインライン ブロック div が JavaScript を使用してラップされるのを防ぎます。

リーリー

ユーザーは、インライン ブロック div 要素が折り返されないようにする方法を学びました。 div 要素が折り返されないようにするには、「white-space」CSS プロパティを使用します。ただし、インライン ブロック div 要素の折り返しを防ぐことは、Web ページの応答性を損なうため、良い方法ではありません。ただし、特定のケースでは、div 要素を垂直方向に展開したくない場合は、これを防ぐことができます。

以上がinline-block div のラップを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。