嘿，我刚研究了你的问题——这其实是Semantic UI卡片组件和水平列表组件的样式冲突导致的，不是你的操作失误哦！

问题根源 #

Semantic UI的卡片（.ui card）内部的.content和.item元素有自己的默认样式规则，比如强制清除浮动、调整内边距等，这些规则会覆盖水平列表（.ui horizontal list）的布局逻辑。当你把水平列表放到卡片外面时，没有这些冲突的样式，所以显示正常；但放进卡片后，卡片的样式会干扰列表的水平排列效果。

两种可行的解决方案 #

方案1：用自定义CSS覆盖冲突样式

给卡片内的水平列表添加针对性的样式，修复布局：

/* 修复卡片内水平列表的布局问题 */
.ui.card .horizontal.list .item {
  float: left;
  clear: none !important;
  margin-right: 1.5em;
}

对应的HTML结构保持你原来的即可，只需要引入这段CSS就能让列表恢复水平排列。

方案2：改用卡片兼容的内联列表

Semantic UI的inline list比horizontal list更适配卡片内部的布局环境，替换后不需要额外CSS也能正常显示：

<div class="ui card">
  <div class="content">
    <div class="ui inline list">
      <div class="item">列表项1</div>
      <div class="item">列表项2</div>
      <div class="item">列表项3</div>
    </div>
  </div>
</div>

这两种方法都能解决你遇到的布局错乱问题，你可以根据自己的需求选择~

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