如何将Windows XP风格窗口标题栏的按钮移至右侧？

算力阿峰

2026-6-28

解决Windows XP风格标题栏按钮靠右的问题

最推荐的方法：用Flex布局（简单好上手）

Flex是现在布局的首选，能轻松实现左右分布的效果，比float靠谱多了。

先把标题栏的HTML结构分成两部分：标题文本和按钮容器

<div class="xp-titlebar">
  <div class="title-text">我的XP窗口</div>
  <div class="title-buttons">
    <button class="min-btn">-</button>
    <button class="max-btn">□</button>
    <button class="close-btn">×</button>
  </div>
</div>

给标题栏容器加Flex相关样式，就能自动把按钮推到右边

.xp-titlebar {
  /* XP标题栏的背景色，可自行替换渐变 */
  background: linear-gradient(#0054e3, #003aa8);
  padding: 4px 8px;
  /* 核心Flex属性 */
  display: flex;
  justify-content: space-between; /* 让左右元素分开，中间留空 */
  align-items: center; /* 让标题和按钮垂直居中 */
  color: white;
  font-family: "Segoe UI", sans-serif;
}

.title-buttons button {
  /* 按钮基础样式，可根据XP风格调整 */
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border: 1px solid #000;
  background: linear-gradient(#f0f0f0, #d0d0d0);
  cursor: pointer;
}

若坚持用float的话（需处理浮动清除）

之前float没生效，大概率是标题栏容器没清除浮动，导致按钮没法正确靠右。试试这个写法：

.xp-titlebar {
  background: linear-gradient(#0054e3, #003aa8);
  padding: 4px 8px;
  overflow: hidden; /* 关键：清除内部浮动，让容器包裹住元素 */
  color: white;
}

.title-text {
  float: left; /* 标题靠左 */
}

.title-buttons {
  float: right; /* 按钮容器靠右 */
}