如何将含Push Me按钮的<a>元素对齐到<div>(<Paper>)右侧？

开发者阿泽

2026-8-10

如何将"Push Me"按钮对齐到Paper组件右侧（不使用绝对定位）

你可以通过Flex布局实现需求，同时保证Paper组件的高度能自适应包含按钮在内的所有内容，以下是两种可靠方案：

方案一：容器使用`justify-content: space-between`

给Paper容器添加flex布局，并通过space-between将左右元素分别推至容器两端：

// 修改demo.tsx中的Paper组件样式
<Paper sx={{ 
  display: 'flex', 
  justifyContent: 'space-between', 
  alignItems: 'flex-start', // 保持内容顶部对齐，如需垂直居中可改为center
  padding: 2 // 可选，添加内边距让内容不贴容器边缘
}}>
  {/* 左侧原有内容 */}
  <div>...</div>
  {/* Push Me按钮 */}
  <a href="#" className="button">Push Me</a>
</Paper>

方案二：给按钮设置`margin-left: auto`

如果左侧有多个元素，只想让按钮单独靠右，这种方案更灵活：

<Paper sx={{ 
  display: 'flex', 
  alignItems: 'flex-start',
  padding: 2
}}>
  <div>左侧元素1</div>
  <div>左侧元素2</div>
  {/* 按钮通过margin-left:auto自动靠右 */}
  <a href="#" className="button" style={{ marginLeft: 'auto' }}>Push Me</a>
</Paper>