タグを使用するときに改行を避けるにはどうすればよいですか?

タグを使用する場合、ブラウザは通常、コンテナ内の項目を次の行に配置します。たとえば、プログラマはナビゲーション コンポーネントを作成するためにタイトルを行に配置する必要があります。インライン、インラインブロック、フレックスボックスプロパティなどを使用して、ラベル内の改行を避けることができます。

この記事では、インライン属性やフレックスボックス属性などを使用してラベルの改行を回避する方法について説明します。

インライン属性を使用する

ラベルの折り返しを回避する一般的な方法は、inline 属性を使用することです。このプロパティは、新しい行を前の行と同じままにするように強制します。

＃＃＃例＃＃＃ リーリー

イラスト

HTML コードは、2 つのコンテナ「first-container」と「second-container」を含む単純な Web ページを作成します。 body 要素のパディングはビューポート幅の 2% です。
「最初のコンテナ」には「インライン」表示値があり、オレンジ色の境界線と 2 ピクセルと 10 ピクセルのパディングが付いています。 「これは最初の段落です」というテキストが表示されます。 「2 番目のコンテナ」には「インライン」表示値があり、紫色の境界線と 10 ピクセルのパディングが付いています。 「これは 2 番目の段落です。」というテキストが表示されます。コンテナは横に並べて表示され、本文のパディングで区切られます。
インラインブロック属性を使用する

これは前の方法と似ていますが、異なります。

インラインとインラインブロックの使用の違いは次のとおりです -

「インライン」要素はテキストのインラインに配置され、必要な幅のみを占めます。新しいブロック書式設定コンテキストは作成されず、新しい行で開始されることもないため、幅、高さ、またはマージンを設定することはできません。インライン要素の例には、「span」タグや「a」タグが含まれます。
「inline-block」要素は「inline」要素に似ていますが、幅、高さ、マージンを設定できます。また、新しいブロック書式設定コンテキストも作成します。これは、パディング、境界線、および背景色を設定できることを意味します。ただし、テキストとの位置は変わらず、新しい行で始まることはありません。インライン ブロック要素の例には、寸法が定義された画像やボタンなどがあります。

• ＃＃＃例＃＃＃ リーリー
フレックスボックスを使用する

非常に一般的な方法は、Flexbox とそのタグ関連のプロパティを使用して改行を避けることです。

＃＃＃例＃＃＃ リーリー

イラスト

この HTML コードは、それぞれが異なるクラスを持つ 3 つのコンテナーを含む単純な Web ページを作成します。 body 要素のパディングはビューポート幅の 2% に設定されます。最初のコンテナ、2 番目のコンテナ、および 3 番目のコンテナ要素には、異なる色のパディングと境界線があります。

コンテナは、display: flex および flex-direction: row スタイルを持つ「container」クラスを持つ親コンテナ内に配置されます。これにより、コンテナ要素が Flex コンテナに設定され、子要素が独自のスタイルとパディングを使用してインラインで表示されます。

• ＃＃＃結論は＃＃＃
この記事では、タグを使用して改行を避ける方法を説明します。改行を避けるために、インライン、インライン ブロック、フレックスボックス属性などを使用できます。プログラマはこれらすべてのメソッドを同様に使用します。

以上がタグを使用するときに改行を避けるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。