Search code examples
htmlcsswebalignment

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.

Solution

  • 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>