Search code examples
htmlcssmathmathjax

Mathjax line breaking problems

Good morning, I use MathJax to show math problems. I want to show two problems on one line and use span to trim.

p.problems span.third {
  width: 33%;
  float: left
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" async></script>

<br><br>Required solution with span on one line<br><br>

<p class="problems"><span class="third">a) \(ax^2 + bx + c = 0\)</span> <span>b) \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)</span></p>

<br><br>it should be on one line<br><br>
<p class="problems">a) \(ax^2 + bx + c = 0\)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b) \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)</p>

Thank you for help.

Solution

  • You could fix this by using display:flex and align-items: center;

    p.problems span.third {
  width: 33%;
  float: left
}
p.problems {
  display: flex;
  align-items: center;
}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML" async></script>

<br><br>Required solution with span on one line<br><br>

<p class="problems"><span class="third">a) \(ax^2 + bx + c = 0\)</span> <span>b) \( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)</span></p>