CSS Properties: How to display paragraph elements as inline elements?

Last update on February 22 2024 12:45:37 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to display paragraph elements as inline elements</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
  p { /* Targets paragraph elements */
    display: inline; /* Sets the display property to inline, making paragraphs display inline */
          }
</style><!-- Ends CSS styling -->
</head><!-- Ends the head section of the document -->
<body><!-- Begins the body section of the document -->
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<p>JavaScript Tutorial.</p><!-- Paragraph element with plain text -->
<p>HTML5 Tutorial.</p><!-- Paragraph element with plain text -->
<p>PHP Tutorial.</p><!-- Paragraph element with plain text -->
<p>Python Tutorial.</p><!-- Paragraph element with plain text -->
<p>MySQL Tutorial.</p><!-- Paragraph element with plain text -->
<p>SQL Tutorial.</p><!-- Paragraph element with plain text -->
</body><!-- Ends the body section of the document -->
</html><!-- Ends the HTML document -->

Explanation:

This HTML document sets up a series of paragraph elements to display inline using CSS.
Comments are added to both HTML and CSS to explain each section of the code.
The CSS <style> block specifies that all <p> elements should be displayed inline.
This setup ensures that all the tutorial topics listed (JavaScript, HTML5, PHP, etc.) are displayed horizontally instead of vertically.

Live Demo:

See the Pen display-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page