CSS实现模态框关闭X按钮移动到右侧与标题同行对齐

两个核心问题导致关闭按钮无法对齐到预期位置：

• HTML结构错误：关闭按钮.close-button当前与标题容器.header为平级兄弟节点，不在header的flex布局控制范围内，无法和标题实现同行两端对齐
• CSS布局属性配置错误：.header设置为inline-flex时，元素宽度仅由内容撑开，不会占满父容器的可用宽度，即便把按钮移入header，justify-content: space-between也无法生效将按钮推到行尾；同时右侧容器.right-side未配置占宽规则，会跟随内容收缩，没有可供布局的剩余空间。

1. 调整HTML结构 #

将关闭按钮节点移入.header容器内部，与标题文本作为同级子元素，修改后的右侧区域代码如下：

<div class="right-side">
  <div class="header">
    Are you sure you want to do that?
    <div class="close-button">✖</div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
  <button class="continue">Continue</button>
  <button class="cancel">Cancel</button>
</div>

2. 修正CSS布局属性 #

仅需修改三处规则即可实现效果，其余原有样式可全部保留：

• 将.modal的display: inline-flex改为display: flex，让模态框作为块级flex容器布局更稳定
• 为.right-side新增flex: 1属性，让右侧内容区自动占满模态框内除左侧图标外的所有剩余宽度
• 将.header的display: inline-flex改为display: flex，让标题栏占满右侧容器的全宽，原有配置的justify-content: space-between会自动将标题推到最左、关闭按钮推到最右，align-items: center会保证两者垂直方向居中对齐

修改后的对应CSS片段：

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0,0,0,.2);
  display: flex;
  padding: 8px 8px;
}

.left-side, .right-side {
  margin: 8px;
}

.right-side {
  flex: 1;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 可选：添加下边距拉开标题和正文的间距，视觉效果更舒适 */
  margin-bottom: 8px;
}

可以给正文.text添加margin-bottom: 16px，拉开正文和底部按钮的间距，整体布局更协调。

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