如何使用 CSS 將段落元素顯示為內聯？

CSS 具有內部和內聯樣式，可用於以內聯方式顯示段落元素。CSS 是一種用於為 HTML 和 XML 文字設定樣式的語言。更改 HTML 元素的 display 屬性是典型的 CSS 工作。元素的 display 屬性指示其應如何呈現，例如塊、內聯或內聯塊。當以內聯方式顯示段落元素時，必須將 display 屬性從其預設的塊值修改為內聯。

在這裡，我們將學習如何開發一個 CSS 程式碼，該程式碼將段落元素顯示為內聯。

語法

<p style="display : inline">..write the paragraph...</p>

HTML 中的段落由 p 標籤表示。display 屬性定義內容如何流動。

設定為 display“inline”的元素將顯示為內聯級框，這意味著它將在文字行內流動。

相反，“塊”元素將填充其父容器的整個寬度，並在任何現有內容下方新增新的一行內容。

標題、段落和 div 元素是塊級元素的示例，而連結、span 元素和影像則是內聯元素的示例。

使用的屬性

示例中使用的以下屬性為：

  • color - 定義文字的顏色。

  • background-color - 定義文字是細還是粗。

  • display - display 屬性指定顯示行為。

示例

在此示例中，我們將開始使用段落元素來設定幾行文字。為了將段落元素顯示為內聯，它將使用 display 屬性透過內聯 CSS 將值設定為 inline。然後為某些元素（即 body、p）設定樣式，這些元素會吸引使用者在網頁上的互動。

<!DOCTYPE html>
<html>
<title>Display paragraph elements as inline using CSS</title>
<head>
</head>
<body style="background-color: powderblue;">
   <center>
      <h1>Rich Dad and Poor Dad</h1>
   </center>
   <p style="background-color:#a89032; color: white; font-style: italic; display: inline;">Rich
      Dad Poor Dad, by Robert Kiyosaki, was initially published in 1997 and immediately became a must-read
      for anybody interested in investment, money, or the global economy. The book has been translated into
      dozens of languages and sold all over the world, becoming the best-selling personal finance book of all
      time. Rich Dad Poor Dad's overriding theme is how to use money as a tool for wealth growth. It debunks
      the idea that the wealthy are born wealthy, explains why your personal residence may not be an asset,
      defines the distinction between an asset and a liability, and much more.
   </p>
   <p style="font-weight: bold; text-align: right; display: inline; color: darkgreen;">@tutorialspoint.com</p>
</body>
</html>

結論

在上面的輸出中，我們可以看到如何在 CSS 的 display 屬性的 inline 值的幫助下控制文字樣式的佈局。這是一個測試將 display 段落元素更改為內聯的好方法。為了保持文字位置的靈活性，有時更改 display 屬性是正確的。

更新於：2023-05-16

2K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告