How to join paragraph in HTML without removing <p> tag-CodePudding

I have created code to print some data.

<!DOCTYPE html>
<html>
<body>

<h1>The p element</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

This give me a result below:

The p element
This is a paragraph.

This is a paragraph.

This is a paragraph.

But what i want to do is to join this three lines without removing <p> tag.

My expected result is:

The p element
This is a paragraph. This is a paragraph. This is a paragraph.

CodePudding user response：

As mentioned above, changing a bit the structure should do the trick. Just wrap your three p elements into a div and use flexbox.

.wrapper {
  display: flex;
  align-items: center;
}

<h1>The p element</h1>

<div >
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</div>

CodePudding user response：

You can change css like this :

p {
    display: inline;
}

CodePudding user response：

You can add display:inline for p tag:

p {
display: inline
}

<!DOCTYPE html>
<html>
  <body>
    <h1>The p element</h1>

    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </body>
</html>

CodePudding user response：

THere is no need to add to the DOM in order to achieve this, and to keep your semantics as they are you probably shouldn't.

Instead CSS can be used to make the p elements display inline-block.

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      display: inline-block;
    }
  </style>
</head>

<body>

  <h1>The p element</h1>

  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

</html>

CodePudding user response：

Use display: flex and flex-direction: row , optionaly can include gap :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The p element</title>
    <style>
        .wrapper {
            display: flex;
            flex-direction: row;
            gap: 4px;
        }
    </style>
</head>
<body>
    <h1>The p element</h1>
    <div >
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </div>
</body>
</html>

See details here

CodePudding user response：

General Case:

Rules: To get all elements to appear on one line the easiest way is to:

Set white-space property to nowrap on a parent element : #parent { white-space: nowrap; }
Have display: inline-block set on all child elements : .child { display: inline-block; }

Remark: You could additionally set overflow-x: auto property on the parent element if you want to show horizontal scrollbars for overflowing content.

Demo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
<style>
#parent{ white-space: nowrap; }
.child{ display: inline-block; }  
  </style>
  </head>
  <body>
    <div id="parent">
<div >hello world1</div>
<div >hello world2</div>
<div >hello world3</div>
    </div>
  </body>
</html>