如何实现h1与h2两个标题元素在同一行对齐显示

问题原因 #

1. HTML存在语法错误，<td colspan='4' 缺少闭合的>，浏览器解析异常会导致布局错乱
2. div、h1、h2都是默认独占一行的块级元素，没有设置横向排列规则的话自然会上下分布
3. 原.circle的样式参数不对，既做不到正圆效果，也没法让内部数字居中

调整方案（flex布局实现最简洁） #

调整后CSS代码

.circle {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: #E6354A;
  color: #FDFEFE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}
/* 清除标题默认外边距避免错位 */
.circle h1, .title-h2 {
  margin: 0;
}

调整后HTML代码

<table cellpadding='0' cellspacing='0' border='0' style='width:98%; text-align: center; margin: 0 auto;'>
  <tr>
    <!-- 修复td未闭合的语法错误 -->
    <td colspan='4'>
      <!-- 父容器开启flex布局，实现内部元素横向排列+垂直居中 -->
      <div style='display: flex; align-items: center;'>
        <div class='circle'>
          <h1 style='font-weight: bold; font-size: 13px;'>" + obj.value[0].DEVICE_OVERALL_SCORE.toFixed(2) + "</h1>
        </div>
        <h2 class='title-h2' style='font-weight: 300; font-size: 16px;'> Device name: " + grci.name + " </h2>
      </div>
      <hr />
    </td>
  </tr>
</table>

核心调整说明 #

• 包裹两个标题的父容器加display: flex让内部元素横向排列，align-items: center保证两者垂直方向居中对齐
• 修正.circle的圆角、宽高参数实现正圆效果，内部用flex让分数完全居中，加右侧边距避免和设备名贴太紧
• 清除h1、h2的默认上下外边距，避免出现上下错位
• 删除了冗余的clear:both属性，flex布局下不需要该属性
• 修复了td标签未闭合的语法错误，避免浏览器解析异常

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