CSS を使用して div 要素をインラインで表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して div 要素をインラインで表示するにはどうすればよいですか?

WBOY

リリース： 2023-09-19 16:45:04

転載

1396 人が閲覧しました

如何使用 CSS 使 div 元素内联显示？

CSS は Cascading Style Sheet の略で、印刷、表示、その他の印刷や表示を含むさまざまなメディアで HTML 要素がどのように表示されるかを指定します。デジタルフォーマット）の外観。 CSS を使用すると、多くの作業を節約できます。複数のWebページのデザインを同時に管理できます。

この記事では、CSS を使用して div 要素をインラインで表示する方法を学びます。これを行うには、まず div 要素をインラインで表示するために使用されるいくつかの CSS プロパティを理解する必要があります -

Display - display 属性は、要素のレンダリングボックスタイプ (表示動作) を指定します。ここでは、display: flex プロパティと display: inline-block プロパティを使用します。
Float - float プロパティを使用すると、要素を左にフロートするか、右にフロートするか、またはまったくフロートしないように指示できます。ここでは、float left プロパティを使用して、左にフローティング div を表示します。
inline 要素は新しい行で開始されず、必要な幅のみを取ります。幅と高さを設定することはできません。

リーリー

以下は、デフォルトのインライン属性を持ついくつかの要素です -

img
本質的にインラインであるタグをフォーマットする -
強力な

Inline-block

リーリー
block
要素は新しい行で始まり、利用可能なすべての幅を使用します。幅と高さの値を設定できます。
div

リ
＃＃＃＃＃＃一部＃＃＃＃＃＃

この例では、すべての div 要素の親 div に、display: flex および flex-direction: row 設定が設定されています。 flex-direction: row 属性のおかげで、親 div 内に含まれるすべてのコンポーネントが 1 行に表示されます。
リーリー＃＃＃例＃＃＃
この例では、インラインで表示する必要があるすべての div に display: inlineblock 属性を追加する必要があります。 display:inlineblock 属性が適用される場合、すべての div コンポーネントは並べて配置されます。
この例では、すべての div 要素をインラインで表示するために、それらに float: left 属性を与えます。さらに、ユーザーは float: right CSS オプションを利用して、すべての div コンポーネントを右から逆の順序で表示できます。
リーリー＃＃＃例＃＃＃
このメソッドは、div 要素の代わりに、span 要素を使用します。ユーザーが div タグにテキストを記述するだけの場合は、すべての span 要素がデフォルトでインラインで表示されるため、span タグを使用できます。
display: inline との主な違いは、display: inline ブロックを使用して要素の幅と高さを設定できることです。

display:inline ブロックも保持し、上下のマージン/パディングも保持しますが、display:inline では保持しません。 display: block との主な違いは、display: inlineblock は要素の後に改行を追加しないため、ある要素を別の要素の隣に配置できることです。
次のコードスニペットは、display: inline、display: inline-block、display: block のさまざまな動作を示しています。
リーリー
ナビゲーションリンクの作成に使用されるインラインブロック
一般的な表示使用法: インラインブロックは、リスト項目を垂直方向ではなく水平方向に表示するために使用されます。次の例では、水平ナビゲーションリンクを作成します。
ああああ

以上がCSS を使用して div 要素をインラインで表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。