Red_C0der Red_C0der - 1 month ago 5
CSS Question

Html prevent line break between p and div

I've got the following problem:

I am trying to put a div with content and more text inside after a

<p></p>
tag.
My problem is, that I don't want a line break after the paragraph tag.

This is my code:

<p>Some text</p>

<!-- Dropbox Daten -->
<div class="dropbox">
<span class="project db_box" data-target="db_index_daten">Daten <i class="fa fa-info-circle"></i></span>
<div class="details-dropbox" id="db_index_daten" hidden>
<div class="box">
<div class="box-text">
<p style="text-align: left;">
Lorem Ipsum
</p>
</div>
</div>
</div>
</div>
<!-- /Dropbox Daten -->


So want it like

Some text Data


and not like

Some text
Data


If you need something else just ask for it.

Answer

Basically you just need to set display: inline; on the elements, that should display in one line.

If you want to keep block properties on the div, use display: inline-block;

p {
  display: inline;
}
.dropbox {
  display: inline-block;
}

You can read more about the display attribute on MDN. Here is a working example:

p {
  display: inline;
}
.dropbox {
  display: inline-block;
}
<p>some text some text some text some text some text some text some text some text some text</p>
<div class="dropbox">data</div>

Comments