使用Semantic UI可通过ui buttons容器类与ui button子类快速创建按钮组，支持横向默认布局及vertical实现纵向排列，结合primary、basic等类可控制样式与主题，compact类适用于紧凑场景，无需自定义CSS即可构建美观统一的交互按钮组。
在CSS中使用 Semantic UI 制作按钮组非常简单，主要依赖于 Semantic UI 提供的预设类名来控制按钮的排列方式和视觉样式。你无需编写额外的 CSS，只需正确使用其 HTML 类即可实现各种布局和外观效果。
基本按钮组结构
Semantic UI 使用 ui buttons 作为容器类，将多个按钮组合在一起。每个按钮使用 ui button 类，并放在容器内。
<div class="ui buttons"><button class="ui button">左</button>
<button class="ui button">中</button>
<button class="ui button">右</button>
</div>
这样会生成一个水平排列、无缝连接的按钮组，边框自动合并，视觉上更统一。
控制按钮排列方向
Semantic UI 默认为横向排列，如需纵向堆叠按钮，添加 vertical 类：
立即学习“前端免费学习笔记（深入）”；
<div class="ui vertical buttons">
<button class="ui button">上</button>
<button class="ui button">中</button>
<button class="ui button">下</button>
</div>
此时按钮会垂直堆叠，适用于侧边栏或表单操作区域。
应用样式与主题类
你可以为按钮组中的各个按钮添加颜色、状态或风格类，以增强表达力：
-
颜色类：如
primary、secondary、red、green -
状态类：如
active、disabled -
风格类：如
inverted、basic、compact
<button class="ui primary button">保存</button>
<button class="ui secondary button">取消</button>
<button class="ui red button">删除</button>
</div>
紧凑与基本样式按钮组
若希望按钮更简洁，可使用 basic 或 compact 类：
- 添加
basic类使按钮呈现无填充边框样式 - 添加
compact类缩小按钮尺寸，适合空间有限场景
<button class="ui button">编辑</button>
<button class="ui button">分享</button>
<button class="ui button">删除</button>
</div>
基本上就这些。Semantic UI 的按钮组通过语义化类名实现了灵活且一致的样式控制，无需自定义 CSS 即可快速构建美观的交互元素。关键是理解容器类与子按钮类的层级关系，并合理组合样式类达成设计目标。
