HTML数学公式无法同行显示求助：div/span排版错误排查

错误原因 #

• 块级元素强制换行：你用的<div>是块级元素，默认会独占一行，所以每个公式部分都会自动换行，没法实现横向排版的效果。
• 标签嵌套违反规范：<p>标签里不能放<div>这种块级元素，浏览器会自动拆分<p>标签，导致页面结构混乱，进一步影响排版。

修复方案 #

把块级的<div>换成内联的<span>，再用CSS实现分式的垂直排列结构，就能让公式和其他内容在同一行显示。

修正后的HTML代码 #

<p>
  <sub>n</sub>C<sub>r</sub> =
  <span class="fraction">
    <span class="top"><sub>n</sub>P<sub>r</sub></span>
    <span class="bottom">r!</span>
  </span> =
  <span class="fraction">
    <span class="top">n!</span>
    <span class="bottom">r!(n-r)!</span>
  </span>
</p>

<br>

<p>
  <span>∫</span>
  <span class="fraction">
    <span class="top">tan x</span>
    <span class="bottom">sec<sup>4</sup>x</span>
  </span> dx =
  <span>∫</span>
  <span class="fraction">
    <span class="top">tan xsec x</span>
    <span class="bottom">sec<sup>5</sup>x</span>
  </span> dx
</p>

配套CSS代码 #

.fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.2em; /* 给分式左右留间距，避免和其他内容拥挤 */
}

.fraction .top {
  border-bottom: 1px solid black; /* 模拟分数线 */
  padding: 0 0.1em;
}

.fraction .bottom {
  padding: 0 0.1em;
}

这样修改后，分式会和其他符号、文本在同一行显示，上下部分居中对齐，完全符合你想要的效果。

内容的提问来源于stack exchange，提问作者SzeChing