如何在一行中內嵌顯示多個 div 元素？

內嵌顯示Div 元素

建立網頁時，您可能會遇到這樣的情況：想要顯示多個相鄰的div 元素其他在同一水平線上。然而，div 元素預設是區塊元素，這意味著它們自然顯示在單獨的行上。

內聯 Div：解決方法

要實現 div 元素的內聯顯示，有涉及覆寫預設區塊級屬性的解決方法。一種流行的方法是使用 CSS 將其顯示屬性明確設定為內聯。這迫使它們表現為內聯元素，在一行上彼此相鄰。

範例：

考慮以下 HTML：

<div>foo</div>
<div>bar</div>
<div>baz</div>

預設情況下，這些 div 將垂直堆疊。要內嵌顯示它們，請加入以下CSS：

div {
  display: inline;
}

此修改會產生所需的結果：

foo bar baz

替代方法：使用Span 元素

另一種方法是將div 元素替換為span 元素。 Span 本質上是內聯元素，因此使用它們來代替 div 可以消除 CSS 覆蓋的需要。

<span>foo</span>
<span>bar</span>
<span>baz</span>

在這種情況下，span 會預設自動顯示內聯。

以上是如何在一行中內嵌顯示多個 div 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！