如何在HTML一行内显示两行内容？ASP MVC+Bootstrap变压器调压实现问题

嘿，我懂你要的效果——左边是跨两行的132 ±，右边上下排列12x1,5 %和8x1.5%，整体看起来像一行里嵌套两行内容对吧？你之前用原生table没达到预期，大概率是Bootstrap默认的表格样式（比如内边距、边框、间距）在搞鬼，试试下面这几种适配Bootstrap的方案，肯定能解决问题：

方案1：用Bootstrap Flex布局（最推荐） #

Flex是Bootstrap里适配性最好的布局方式，代码简洁还自带响应式：

<div class="d-flex align-items-center">
  <div class="me-2">132 &#177;</div>
  <div>
    <div>12x1,5 %</div>
    <div>8x1.5%</div>
  </div>
</div>

• d-flex把外层容器变成弹性布局，让左右元素在同一行
• align-items-center确保左边的132 ±和右边两行文本垂直居中对齐
• me-2给左边元素加一点右边间距，避免内容挤在一起

方案2：优化原生Table结构 #

如果你坚持想用table，只要去掉Bootstrap的默认样式干扰就行：

<table class="border-0" style="border-collapse: collapse; margin: 0;">
  <tr>
    <td rowspan="2" class="p-0 align-middle">132 &#177;</td>
    <td class="p-0">12x1,5 %</td>
  </tr>
  <tr>
    <td class="p-0">8x1.5%</td>
  </tr>
</table>

• border-0去掉表格边框，border-collapse: collapse合并单元格间隙
• p-0清除所有内边距，让内容更紧凑
• align-middle让跨两行的单元格内容垂直居中

方案3：轻量化Inline-block布局 #

如果不需要Bootstrap的响应式，这个更简单：

<div style="display: inline-block; vertical-align: middle;">132 &#177;</div>
<div style="display: inline-block;">
  <div>12x1,5 %</div>
  <div>8x1.5%</div>
</div>

通过inline-block让两个容器在同一行，vertical-align: middle保证垂直居中，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Juan Salvador Portugal