容器,例如:
2、在CSS中为.btn-group添加样式:display: flex; gap: 8px; justify-content: center;
立即学习“PHP免费学习笔记(深入)”;
3、为按钮统一设置基础样式,如padding: 8px 16px; border: 1px solid #ccc; background: #fff; cursor: pointer;
二、垂直方向按钮组布局
当需要按钮纵向堆叠时,可通过flex-direction属性切换主轴方向,适用于侧边导航或操作面板场景。
1、保持HTML结构不变,仅修改CSS中的容器定义
2、将.btn-group样式中的display属性扩展为:display: flex; flex-direction: column; gap: 6px;
3、可选添加align-items: stretch;使所有按钮宽度一致并撑满容器
三、等宽自适应按钮组
利用flex: 1属性让每个按钮平均分配父容器剩余空间,适用于工具栏或选项卡式按钮组。
1、为.btn-group保留display: flex;,不设置gap或设置为固定值
2、为内部每个
3、添加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止文字换行溢出
四、带分隔线的按钮组
通过伪元素或相邻兄弟选择器在按钮之间插入视觉分隔线,增强可读性与层次感。
1、为.btn-group设置display: flex; position: relative;
2、为除第一个按钮外的所有
3、或使用::before伪元素在每个按钮前生成竖线,配合position: absolute;精确定位
五、响应式断点按钮组
结合媒体查询,在不同视口宽度下切换按钮排列方式,例如移动端堆叠、桌面端横排。
1、默认状态下设置.btn-group为display: flex; flex-direction: column;
2、在768px以上视口添加媒体查询:@media (min-width: 768px) { .btn-group { flex-direction: row; gap: 10px; } }
3、为按钮在小屏下添加width: 100%; margin-bottom: 4px;确保垂直排列时占据整行