HTML中如何将两个div组件设置为行内显示 避免分为两行展示

有多种方式可以实现两个div行内显示，以下是最常用的两种方案：

方案1：修改div的默认块级属性 #

div默认是display: block的块级元素，会独占一行，你可以给两个div添加display: inline-block属性，同时注意内部的<h4>默认也是块级元素，需要同步修改为行内属性避免内部换行：

<div style = "padding-left:10px; display: inline-block;">
  <h4 class = "line" style="display: inline;">Sev: </h4>
</div>
<div style = "padding-left:10px; display: inline-block;">
  <span class="center"> Weekly : 122</span>
</div>

如果你不需要保留div的块级宽高属性，也可以把display: inline-block替换为display: inline。

方案2：给父容器使用Flex布局（更推荐） #

如果这两个div有共同的父元素，直接给父元素添加display: flex属性即可，不需要修改div本身的属性，适配性更强：

<!-- 父容器示例 -->
<div style="display: flex;">
  <div style = "padding-left:10px">
    <h4 class = "line" style="display: inline;">Sev: </h4>
  </div>
  <div style = "padding-left:10px">
    <span class="center"> Weekly : 122</span>
  </div>
</div>

注：如果需要调整两个div的间距、对齐方式，可以通过Flex布局的gap、align-items等属性快速调整。

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