CODEWITHSUNDEEP
htmlcssscripting
Elhabib
Elhabib

Reputation: 151

Prevent line break between html elements

Can anyone help please, need to avoid line break between html elements; my code is:

<td><a href="t"><p d-color="0.80">0.80%</p></a>/<a href="">Map</a></td>

the current result is:

0.80%
/Map

the expected one is:

0.80%/Map

thanks

Upvotes: 1

Views: 7897

Answers (5)

David W
David W

Reputation: 49

Similar to this, but I have succesfully made three child DIVs stay on one line using display: inlin-block; position and float. The full description can be found in my answer to How to force inline divs to stay on same line?

Upvotes: 0

David W
David W

Reputation: 49

You can use <nobr>. For example: <nobr> Rule 20.9</nobr> to prevent line break.

Upvotes: 1

Miran Firdausi
Miran Firdausi

Reputation: 345

You have used paragraph tag <p> which is responsible for line break, because it is a block level element and after a paragraph ends the next text is written from a new line.

So there is a simple solution for this, In the paragraph tag use CSS to inline the element this will bring both the text together.

The code is <p style="display: inline">

Use it in your code here:

<p d-color="0.80" style="display: inline;">0.80%</p>

Upvotes: 0

Shashan Sooriyahetti
Shashan Sooriyahetti

Reputation: 878

If you want to keep the

tag and considering the answer use style="display:inline"

<td>
 <a href="t">
  <p style="display:inline" d-color="0.80">0.80%</p>
 </a>
 /<a href="">Map</a>
</td>

or you can use tag instead of

,

<td><a href="t"><span d-color="0.80">0.80%</span></a>/<a href="">Map</a></td>

Upvotes: 0

tacoshy
tacoshy

Reputation: 13002

The issue is, that paragraphs <p> </p> are block level elements. As such they will by default always display in a new line and cause a line break afterwards.

Option A: Replacing the paragraph with an inline element:

<d><a href="t"><span d-color="0.80">0.80%</span></a>/<a href="">Map</a></d>

Option B: Making the paragraph inside a link to be inline:

a p {
  display: inline;
}
<d><a href="t"><p d-color="0.80">0.80%</p></a>/<a href="">Map</a></d>

Upvotes: 1

Related Questions