如何修改HTML/CSS使row-group内容在heading-tab右侧而非下方显示

调整方案 #

你只需要修改两处代码即可实现需求：

1. 给父容器.page-container新增flex布局属性，让内部两个块级子元素从上下排列改为水平并排
2. 修正你现有HTML里heading-tab标签的闭合错误（你当前写的是<div>，需要改成</div>，不然会导致布局层级异常）

修改后的CSS代码

.page-container {
  margin-left: 3rem;
  display: flex; /* 新增：子元素水平排列 */
  align-items: center; /* 可选：如果你需要两个模块垂直方向居中对齐就加，要顶部对齐改成align-items: flex-start即可 */
}

.heading-tab {
  height: 72px;
  width: 294px;
  border-top: 1px solid lightgrey;
}

.heading-text {
  padding-top: 22px;
  padding-bottom: 22px;
  padding-left: 32px;
  margin-bottom: 0px;
  font-size: 16px;
  font-weight: bold;
}

.row-group {
  display: flex;
  border-bottom: 1px solid;
  justify-content: space-between;
  padding-top: 0.8rem;
  padding-bottom: 0.4rem;
  /* 如果你需要和左侧tab加间距，可以在这里加margin-left: xx */
}

.row-content {
  padding: 0.25rem;
  padding-right: 24px;
  min-width: 200px;
  width: 200px;
}

修改后的HTML代码

<div class="page-container">
  <div class="heading-tab">
    <p class="heading-text">
      Heading 1
    </p>
  </div> <!-- 修正了这里的标签闭合错误 -->

  <div class="row-group">
     <div class="row-content">My name is CTS and my alignment is all wrong!</div>
   </div>
 </div>

如果需要调整两个模块的水平间距，直接给.row-group加margin-left属性设置对应数值即可。

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