html - 尝试在 html 的一行内显示两行

我正在使用 ASP MVC 和 Bootstrap 中的一个元素，我需要显示变压器的调节，这以下列方式表示:



我试图通过以下方式做到这一点，但没有达到我想要的结果:

<table>
  <tr>
    <td rowspan="2">132 &#177;</td>
    <td>12x1,5 %</td>
  </tr>
  <tr style="margin-top: 0px;">
    <td>8x1.5%</td>
  </tr>
</table>

最佳答案

您可以从以下方面着手:

.txt{ height: 40px; display: table-cell; vertical-align: middle; }
.supsub { display: inline-block; }
.supsub sub { top: .3em !important; }
.op {  font-size: 36px }
.supsub sup, .supsub sub {
    position: relative;
    display: block;
    font-size: .8em !important;
    line-height: 1.2;
}

<span class="main">
    <span class="op">(</span>
    <span class="txt">
        132
    </span>
    <span class="supsub">
        <sup>&#43; 12x1,5 %</sup>
        <sub>&#8722; 8x1.5%</sub>
    </span>
    <span class="op">)/</span>
    <span class="txt">
        13,86 KV
    </span>
</span>

关于html - 尝试在 html 的一行内显示两行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49388010/