React-Semantic-UI Accordion：标签标题需内嵌箭头图标问题问询

我之前也碰到过这个旧版本Accordion的布局问题，默认情况下箭头图标和标题文本是分开排列的，要实现你要的内嵌inline效果，可以试试下面两种实用方法：

方法一：自定义标题结构结合内联样式 #

直接在Accordion.Title里手动控制图标和文本的布局，用flex容器让它们紧密排列在同一区域：

<Accordion.Title>
  <div style={{ display: 'inline-flex', alignItems: 'center' }}>
    <Icon name='dropdown' />
    <span style={{ marginLeft: '0.5em' }}>inline</span>
  </div>
</Accordion.Title>

把图标和标题放在同一个flex容器里，既能保证它们内嵌排列，还能通过样式调整间距，完美贴合你要的效果。

方法二：全局CSS统一调整 #

如果需要所有Accordion都生效，可以针对v0.77.2版本的DOM结构添加自定义CSS：

/* 适配React-Semantic-UI v0.77.2的Accordion标题布局 */
.ui.accordion .title {
  display: inline-flex !important;
  align-items: center;
}

.ui.accordion .title .icon {
  margin-right: 0.5em !important;
  margin-top: 0 !important; /* 移除默认的顶部间距，避免错位 */
}

这个方法会修改全局Accordion标题的默认布局，让图标和文本默认内联排列，适合需要统一样式的场景。

注意v0.77.2版本的Accordion DOM结构和新版本有差异，所以CSS选择器要精准匹配旧版本的类名，测试下来这两种方法都能实现你要的“标签内嵌于箭头图标中”的预期效果。

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