如何避免使用標籤時產生換行？-html教學-PHP中文網

如何避免使用標籤時產生換行？

使用標籤時，瀏覽器通常會將容器內的項目放置在下一行。例如，程式設計師需要將標題放在一行中以建立導航元件。我們可以使用 inline、inline-block、flex-box 屬性等來避免標籤出現新行。

本文將說明如何透過 inline 屬性、flex-box 屬性等方法避免標籤的換行。

使用內聯屬性

避免使用標籤換行的一種流行方法是使用 inline 屬性。此屬性強制新行與前一行保持相同。

     This is the first paragraph. 
  This is the second paragraph.

登入後複製

HTML 程式碼建立一個包含兩個容器「first-container」和「second-container」的簡單網頁。 body 元素的內邊距為視窗寬度的 2%。
「第一個容器」具有「內聯」顯示值，帶有橘色邊框以及 2 和 10 像素的填充。它顯示文字“這是第一段”。「第二個容器」具有「內嵌」顯示值，帶有紫色邊框和 10 像素的填充。它顯示文字「這是第二段。」容器並排顯示，並透過正文填充分隔開。

這與之前的方法類似，但又不一樣。

使用內聯和內聯區塊之間的差異如下 -

「內聯」元素與文字內聯放置，並且僅佔用所需的寬度。它們不會建立新的區塊格式化上下文，也不會從新行開始，因此它們無法設定寬度、高度或邊距。內嵌元素的範例包括“span”標籤和“a”標籤。
「inline-block」元素與「inline」元素類似，但它們可以設定寬度、高度和邊距。它們還創建一個新的區塊格式化上下文，這意味著它們可以設定填充、邊框和背景顏色。但是，它們仍將與文字對齊，並且不會另起一行。內聯塊元素的範例包括具有定義尺寸和按鈕的圖像。

     This is the first paragraph. 
  This is the second paragraph.

登入後複製

一種非常流行的方法是使用 Flexbox 及其與標籤相關的屬性來避免換行。

     This is the first element.
 This is the second element.
 This is the third element.

登入後複製

此 HTML 程式碼建立一個簡單的網頁，其中包含三個容器，每個容器具有不同的類別。 body 元素的內邊距設定為視窗寬度的 2%。第一個容器、第二個容器和第三個容器元素有不同顏色的內邊距和邊框。
容器放置在具有「container」類別的父容器內，該類別具有 display: flex 和 flex-direction: row 樣式。這會將容器元素設定為 Flex 容器，並以行內方式顯示子元素，並具有各自的樣式和填充。