CSS布局问题：固定宽高右侧按钮无法右对齐且显示为新块

架构老林

2026-7-3

问题原因与解决办法

问题根源

<div>是块级元素，默认会独占一行，所以右侧的.proximo按钮才会被挤到新的块里，没法和左侧按钮在同一行。
给.proximo设置text-align: right完全无效——这个属性是用来控制元素内部的行内元素（比如你的按钮图片）对齐的，不是让<div>自身定位到页面右侧。

解决方案

方案1：Flex布局（推荐，现代前端首选）

给父元素<main>添加Flex属性，就能轻松把两个按钮分到页面左右两侧：

/* 给main设置Flex布局 */
main {
  display: flex;
  justify-content: space-between;
  /* 如果需要让按钮垂直居中，可添加这行 */
  /* align-items: center; */
}

/* 统一两个按钮的样式，删掉没用的text-align */
main div.voltar, main div.proximo {
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}

方案2：浮动布局（传统兼容方案）

如果不想用Flex，也可以通过浮动实现，但需要额外处理清除浮动的问题：

main div.voltar {
  float: left; /* 左侧按钮左浮动 */
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}

main div.proximo {
  float: right; /* 右侧按钮右浮动 */
  height: 52px;
  width: 52px;
  background-color: #D9C2A7;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.288);
}

/* 给main清除浮动，避免影响后续页面元素 */
main::after {
  content: "";
  display: table;
  clear: both;
}