div closing table inserting a line-break? how to prevent-CodePudding

Why does the following HTML insert a line break after the div closing tag? how to prevent the line break from occurring so that it looks like extra simple table.


<p>
<div style="width:200px">Keyword1</div> :About 1<br>
<div style="width:200px">Keyword2</div> :About 2<br>
</p>

I would have thought this produces:

Keyword1 : About 1
Keyword2 : About 2

instead it produces:

Keyword1 
: About 1
Keyword2 
: About 2

CodePudding user response：

this happen because <div> by default is display: block;,
so you can override this by writing display: inline;

<p>
  <div style="width:200px; display: inline;">Keyword1</div> :About 1<br>
  <div style="width:200px; display: inline;">Keyword2</div> :About 2<br>
</p>

however, I suggest something more structured like this (since that code isn't a valid html)

<div>
  <!-- 1 -->
  <div style="display: flex;">
    <span style="width: 200px">Keyword1</span>
    <span>:About 1</span>
  </div>
  <!-- 2 -->
  <div style="display: flex;">
    <span style="width: 200px">Keyword2</span>
    <span>:About 2</span>
  </div>
</div>

CodePudding user response：

A div must not be child of a p tag - that's invalid HTML.

Also, div tags are block elements, which causes those linebreaks.

To use valid HTML, use spans instead of divs for inline elements. spans are inline by default, so add display: inline-block to them to have the possibility to apply a fixed width to them:

<p>
  <span style="display: inline-block;width:200px;">Keyword1</span> :About 1<br>
  <span style="display: inline-block;width:200px;">Keyword2</span> :About 2<br>
</p>

P.S.: You'd dbe better off using external CSS (using classes) instead of inline CSS on each element.

CodePudding user response：

div tag is block level element i would suggest to use

display :inline

in styles