Wie zeige ich Absatzelemente inline mit CSS an?-CSS-Tutorial-php.cn

Wie zeige ich Absatzelemente inline mit CSS an?

WBOY

Freigeben： 2023-09-06 16:41:04

nach vorne

1310 Leute haben es durchsucht

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

CSS verfügt über interne Stile und Inline-Stile, mit denen Absatzelemente inline angezeigt werden können. CSS ist eine Sprache zum Formatieren von HTML- und XML-Text. Das Ändern der Anzeigeeigenschaften von HTML-Elementen ist eine typische CSS-Aufgabe. Die Anzeigeeigenschaften eines Elements geben an, wie es gerendert werden soll, z. B. Block, Inline oder Inline-Block. Wenn Sie ein Absatzelement inline anzeigen, müssen Sie die Anzeigeeigenschaft von ihrem Standardblockwert auf „inline“ ändern.

Hier erfahren Sie, wie Sie CSS-Code entwickeln, der Absatzelemente inline anzeigt.

Grammatik

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

Nach dem Login kopieren

Absätze in HTML werden durch p-Tags dargestellt. Anzeigeeigenschaften definieren, wie Inhalte fließen.

Ein Element, das auf die Anzeige „inline“ eingestellt ist, wird als Inline-Box angezeigt, was bedeutet, dass es innerhalb einer Textzeile fließt.

Im Gegensatz dazu füllt ein „Block“-Element die gesamte Breite seines übergeordneten Containers aus und fügt unterhalb des vorhandenen Inhalts eine neue Inhaltszeile hinzu.

Titel, Absätze und div-Elemente sind Beispiele für Elemente auf Blockebene, während Links, span-Elemente und Bilder Beispiele für Inline-Elemente sind.

Verwendete Attribute

Die folgenden im Beispiel verwendeten Eigenschaften sind -

Farbe – Definieren Sie die Farbe des Textes.
Hintergrundfarbe – Definieren Sie den Text als dünn oder dick.
display – Das Anzeigeattribut gibt das Anzeigeverhalten an.

Beispiel

In diesem Beispiel beginnen wir mit der Verwendung des Absatzelements, um einige Textzeilen einzurichten. Um ein Absatzelement inline anzuzeigen, verwendet es die Anzeigeeigenschaft, um den Inline-Wert über Inline-CSS festzulegen. Gestalten Sie dann einige Elemente wie Body und P, um die Benutzerinteraktion auf der Webseite anzulocken.

<!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>

Nach dem Login kopieren

Fazit

In der obigen Ausgabe können wir sehen, wie das Layout von Textstilen mithilfe von Inline-Werten in CSS-Anzeigeeigenschaften gesteuert wird. Es empfiehlt sich, Variationen der Anzeige von Absatzelementen als Inline-Elemente zu testen. Um die Flexibilität bei der Textplatzierung zu gewährleisten, ist es manchmal angebracht, die angezeigten Eigenschaften zu ändern.

Das obige ist der detaillierte Inhalt vonWie zeige ich Absatzelemente inline mit CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!