CODEWITHSUNDEEP
htmlcsstags
Josh
Josh

Reputation: 1819

How to avoid a new line with the 'p' tag

How can I stay on the same line while working with the <p> tag?

I want to create a carousel with an image and text.

Upvotes: 141

Views: 410418

Answers (6)

J_sdev
J_sdev

Reputation: 346

I have to disagree with the currently accepted answer and other examples as they will lead to bad practices. The accepted answer is not w3c spec. The p tag is a display block element and should be used as a container for phrasing content.

If you don't want a paragraph and you need elements inline, then don't use the p tag. Use span or another option for the inline content.

Upvotes: 0

ackushiw
ackushiw

Reputation: 1736

I came across this for CSS,

span, p{overflow: hidden; white-space: nowrap;}

via a similar Stack Overflow question.

Upvotes: 33

John Boker
John Boker

Reputation: 83709

Something like

p
{
    display: inline;
}

in your stylesheet would do it for all p tags.

Upvotes: 11

Ronnie Smith
Ronnie Smith

Reputation: 18565

Flexbox works.

.box{
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  border: 1px solid #e3f2fd;
}
.item{
  flex: 1 1 auto;
  border: 1px solid #ffebee;
}
<div class="box">
  <p class="item">A</p>
  <p class="item">B</p>
  <p class="item">C</p>
</div>

Upvotes: 3

Steve Harrison
Steve Harrison

Reputation: 125510

The <p> paragraph tag is meant for specifying paragraphs of text. If you don't want the text to start on a new line, I would suggest you're using the <p> tag incorrectly. Perhaps the <span> tag more closely fits what you want to achieve...?

Upvotes: 103

Doug Neiner
Doug Neiner

Reputation: 66191

Use the display: inline CSS property.

Ideal: In the stylesheet:

#container p { display: inline }

Bad/Extreme situation: Inline:

<p style="display:inline">...</p>

Upvotes: 217

Related Questions