Why can't my HTML code be displayed on the same line?-CodePudding

I made formulas with div and span, which contain some special symbols, but why can't they be displayed on the same line. I want them to show up like this -->[enter image description here], But they are displayed line by line.[enter image description here]

Please tell me what I am doing wrong!

<p>
  <sub>n</sub>C<sub>r</sub> =
  <div ><sub>n</sub>P<sub>r</sub></div>
  <div> &nbsp; r!</div> =
  <div >n!</div>
  <div> &nbsp; r!(n-r)!</div>
</p>

<br>

<p>
  <span>&#8747;</span>
  <div >tan x</div>
  <div>sec<sup>4</sup>x</div> dx =
  <span>&#8747;</span>
  <div >tan xsec x</div>
  <div>sec<sup>5</sup>x</div> dx

</p>

CodePudding user response：

Currenly you are not using float:left or not using display:flex css to make element in one line.

Try below code. You will get expected result.

<div style="display: flex;align-items: center;text-align: center;">
    <div style="margin-right: 10px">
        <sub>n</sub>C<sub>r</sub> =
    </div>
    <div style="margin-right: 10px">
        <div class = "top"><sub>n</sub>P<sub>r</sub></div>
        <hr>
        <div> &nbsp;  r!</div>
    </div>
    <div style="margin-right: 10px">=</div>
    <div>
        <div class = "top">n!</div>
        <hr>
        <div> &nbsp;  r!(n-r)!</div>
    </div>
</div>