CSS如何实现文本单行对齐且元素间距均匀？新手布局问题求助

AI 小北

2026-10-4

现有代码问题排查

所有带数值的尺寸属性缺失长度单位，例如margin-left: 350、width: 65未加px单位，浏览器无法识别对应规则，样式直接失效
.yesButton选择器中同时写了margin-left: 350和margin: initial，后者会覆盖前者的边距设置，自定义边距完全不生效
布局逻辑混乱，混用float、inline-block、固定边距定位，适配性极差，窗口尺寸变动就会出现错位
父容器div的align-content属性仅在flex/grid布局下生效，当前设置无效，无法实现居中对齐效果

优化方案（Flex布局实现需求）

你要实现的同轴线均匀对齐的布局，用Flex布局就能非常简单的实现，不需要写复杂的定位规则。
首先调整HTML结构，把提示文本、确认按钮、取消按钮放在同一个父容器内：

<div class="action-group">
  <p>提示文本内容</p>
  <button class="yesButton">确认</button>
  <button class="noButton">取消</button>
</div>

修正后的CSS代码如下：

body {
  background: #292929;
  font-family: Roboto, sans-serif;
  color: #fff;
}

h1 {
  text-align: center;
  margin: 20px 0;
}

/* 父容器统一控制布局 */
.action-group {
  display: flex;
  align-items: center; /* 垂直方向所有元素居中对齐 */
  justify-content: center; /* 整组元素水平居中 */
  gap: 80px; /* 控制元素之间的均匀间距，可按需调整数值 */
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* 公共按钮样式，无需重复写两套 */
.action-group button {
  padding: 14px 16px;
  font-size: 12px;
  border: none;
  background-color: #575757;
  color: #fff;
  cursor: pointer;
}

.action-group button:hover {
  background: #3d3d3d;
}

修改后效果说明：