在网页交互设计中，按钮组是常见的组件形态，很多时候我们需要一组按钮的视觉宽度保持一致，无论按钮内的文本长度如何变化，同时还要能在不同屏幕尺寸下保持良好的布局适配效果。使用纯CSS就能实现这类需求，不需要依赖JavaScript计算文本宽度或者动态调整样式。
基础等宽按钮实现方案
最基础的等宽按钮可以通过flexbox布局实现，将按钮容器设置为弹性容器，让内部的按钮自动分配宽度。这种方式不需要提前知道按钮文本的长度，所有按钮会平分容器的可用宽度。
flexbox基础实现
首先定义按钮的容器样式，设置display: flex，然后给每个按钮设置flex: 1，这样每个按钮就会获得相同的弹性增长系数，宽度会保持一致。
/* 按钮容器样式 */
.btn-group {
display: flex;
gap: 12px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}
/* 按钮基础样式 */
.btn {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: 4px;
background-color: #409eff;
color: #fff;
font-size: 14px;
cursor: pointer;
text-align: center;
/* 防止文本过长换行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
对应的HTML结构如下，三个按钮的文本长度不同，但会保持相同的宽度：
<div class="btn-group">
<button class="btn">短文本</button>
<button class="btn">中等长度文本</button>
<button class="btn">非常长的按钮文本内容</button>
</div>
动态文本适配处理
当按钮文本是动态生成的时候，可能会出现文本过长导致按钮宽度超出预期的情况，这时候需要对文本溢出场景做处理。上面的基础样式中已经添加了white-space: nowrap、overflow: hidden和text-overflow: ellipsis，可以在文本过长的时候显示省略号，避免影响整体布局。
如果需要文本换行同时保持按钮等宽，可以调整white-space属性，同时给按钮设置最小高度，避免换行后按钮高度差异过大：
.btn-wrap {
flex: 1;
padding: 10px 16px;
border: none;
border-radius: 4px;
background-color: #409eff;
color: #fff;
font-size: 14px;
cursor: pointer;
text-align: center;
/* 允许文本换行 */
white-space: normal;
word-break: break-all;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
响应式布局适配
当屏幕尺寸变小时，等宽排列的按钮可能会出现挤压或者显示不全的问题，这时候需要结合媒体查询调整布局。比如在小屏幕上让按钮垂直排列，或者调整按钮的排列方式。
小屏幕适配方案
可以通过媒体查询，当屏幕宽度小于768px的时候，将按钮容器的flex方向改为垂直排列，每个按钮的宽度改为100%，占满整行：
@media (max-width: 768px) {
.btn-group {
flex-direction: column;
gap: 8px;
}
.btn, .btn-wrap {
flex: none;
width: 100%;
}
}
grid布局实现等宽按钮
除了flexbox，也可以使用grid布局实现等宽按钮，grid的fr单位可以更方便地控制列宽比例，适合固定列数的按钮组场景：
.btn-grid-group {
display: grid;
/* 3列等宽，每列占1份可用空间 */
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}
.grid-btn {
padding: 10px 16px;
border: none;
border-radius: 4px;
background-color: #67c23a;
color: #fff;
font-size: 14px;
cursor: pointer;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
对应的HTML结构：
<div class="btn-grid-group">
<button class="grid-btn">确认</button>
<button class="grid-btn">取消操作</button>
<button class="grid-btn">重置所有配置</button>
</div>
常见问题与解决方案
- 按钮宽度不一致：检查是否正确给按钮设置了
flex: 1或者grid的列宽设置，同时确保按钮没有设置固定宽度。 - 文本溢出不显示省略号：确认同时设置了
white-space: nowrap、overflow: hidden和text-overflow: ellipsis三个属性。 - 响应式适配失效：检查媒体查询的断点设置是否合理，是否覆盖了目标屏幕尺寸，同时确认样式优先级没有问题。
通过以上几种纯CSS方案，就可以实现不同场景下的响应式等宽按钮，满足动态文本和不同布局适配的需求，减少JavaScript的依赖，提升页面性能。