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

CSS具有可以用于以内联方式显示段落元素的内部和内联样式。CSS是一种用于样式化HTML和XML文本的语言。更改HTML元素的显示属性是CSS的一项典型工作。元素的display属性指示它应该如何呈现，例如块级元素、内联元素或内联块元素。要将段落元素显示为内联元素，必须将display属性从其默认的块级值修改为内联。

在这里，我们将学习如何开发一个CSS代码，以将段落元素显示为内联元素。

语法

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

在HTML中，段落由p标签表示。display属性定义了内容的流动方式。

将元素设置为”display:inline”时，它将显示为内联级别的框，这意味着它将在一行文本中流动。

相反，”display:block”元素将填充其父容器的整个宽度，并在现有内容下方添加一行新的内容。

标题、段落和div元素是块级元素的示例，而链接、span元素和图像是内联元素的示例。

使用的属性

以下是示例中使用的属性：

color - 定义文本的颜色。
background-color - 定义文本的背景颜色。
display - display属性指定了显示行为。

示例

在这个示例中，我们将使用段落元素来设置几行文本。要将段落元素显示为内联元素，可以使用display属性并将其值设为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>