如何让网页模板生成的按钮与新增按钮横向对齐排列

一、先修正HTML的参数错误 #

你新增的11月、12月按钮跳转参数有误，month值仍为10，需修改为对应月份：

<!-- 修正11月按钮 -->
<a href="../nav/nav_calendar.do?month=11" class="u-border-1 u-border-active-palette-2-base u-border-hover-palette-1-base u-btn u-button-style u-none u-text-grey-80 u-btn-10">11월</a>
<!-- 修正12月按钮 -->
<a href="../nav/nav_calendar.do?month=12" class="u-border-1 u-border-active-palette-2-base u-border-hover-palette-1-base u-btn u-button-style u-none u-text-grey-80 u-btn-10">12월</a>

二、添加CSS实现横向排列 #

1. 核心CSS代码 #

通过覆盖模板默认的网格布局，将按钮容器改为弹性布局，实现一行排列：

/* 让按钮容器变为弹性布局，强制一行排列 */
.u-repeater-2 {
  display: flex;
  flex-wrap: nowrap; /* 若容器宽度不足，可改为wrap实现自动换行 */
  gap: 8px; /* 按钮间距，可按需调整 */
}

/* 让每个按钮项宽度均匀分配 */
.u-repeater-2 .u-list-item {
  flex: 1;
  min-width: 70px; /* 设置最小宽度，避免按钮过窄 */
}

/* 确保按钮占满父容器宽度 */
.u-repeater-2 .u-btn {
  width: 100%;
  box-sizing: border-box;
}

2. CSS代码添加位置 #

• 内联样式（快速测试）：在页面<head>标签内新增<style>标签，将上述代码写入其中
• 外部样式表（推荐）：将代码添加到项目的自定义CSS文件中，确保该文件在模板自带的CSS之后引入，保证样式优先级
• 行内样式（不推荐）：直接给.u-repeater-2元素添加style="display:flex; flex-wrap:nowrap; gap:8px;"，但不利于后续维护

三、效果说明 #

添加后，12个月份按钮会在同一行均匀排列，同时保留原有按钮的边框、hover交互等样式；若容器宽度不足，修改flex-wrap为wrap即可实现自动换行。

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