如何将文本置于进度条div前并实现同行显示？

你的问题核心在于：外层div未实际应用display: flex样式，同时<p>标签默认是块级元素且带上下外边距，进度条容器也没设置合适宽度，导致无法横向布局。

修改后的代码如下：

CSS 代码 #

.progress-container {
  display: flex;
  align-items: center; /* 让文本和进度条垂直居中对齐 */
  gap: 10px; /* 文本与进度条的间距 */
}

.progress-container p {
  margin: 0; /* 移除p标签默认的上下外边距 */
  white-space: nowrap; /* 防止文本换行 */
}

.ratio-background {
  background-color: red;
  height: 12px; /* 给进度条背景设置高度 */
  width: 100%; /* 让背景占满父容器宽度 */
}

.ratio-main {
  height: 12px;
  background-color: green;
}

HTML 代码 #

<div class="progress-container">
  <p>Ratio</p>
  <div style="flex: 1;"> <!-- 让进度条容器自动填充剩余水平空间 -->
    <div class="ratio-background">
      <div class="ratio-main" style="width: 30%"></div>
    </div>
  </div>
</div>

关键调整说明 #

• 给外层容器添加display: flex，直接实现横向排列
• align-items: center保证文本和进度条垂直居中，视觉更协调
• flex: 1让进度条容器自适应剩余宽度，适配不同布局场景
• 移除<p>的默认外边距，避免多余的垂直空隙

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