如何使用 CSS 將段落元素顯示為內嵌？-css教學-PHP中文網

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

WBOY

發布： 2023-09-06 16:41:04

轉載

1287 人瀏覽過

如何使用 CSS 将段落元素显示为内联？

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

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

文法

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

登入後複製

HTML中的段落以p標籤表示。顯示屬性定義內容的流動方式。

設定為顯示「內聯」的元素將顯示為內聯級框，這表示它將在一行文字內流動。

相較之下，「區塊」元素將填滿其父容器的整個寬度，並在任何現有內容下方新增的內容行。

標題、段落和 div 元素是區塊級元素的範例，而連結、span 元素和圖像是內聯元素的範例。

使用的屬性

範例中使用的以下屬性是 -

顏色 - 定義文字的顏色。
background-color - 將文字定義為細或粗。
display - display 屬性指定顯示行為。

範例

在此範例中，我們將開始使用段落元素來設定幾行文字。要將段落元素顯示為內聯，它將使用 display 屬性透過內聯 CSS 設定內聯值。然後設計一些元素的樣式，例如 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>

登入後複製