应用星级评分代码实现后显示垂直，如何改为水平排列？

你的星级图标出现垂直排列的问题，核心原因是<span>元素的默认行内显示特性被破坏了（比如被全局CSS设置成了块级元素）。以下是几种直接有效的修复方案：

方案1：重置星星元素的显示属性 #

给星星图标添加CSS，强制它们保持行内/行内块级显示：

.fa-star {
  display: inline-block;
  margin: 0 3px; /* 可选：添加间距优化视觉效果 */
}
.checked {
  color: orange;
}

方案2：用容器包裹并使用Flex布局 #

把所有星星放在一个容器里，通过Flex布局轻松实现水平排列，还能灵活控制对齐方式：

<h2>Star Rating</h2>
<div class="star-group">
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star"></span>
  <span class="fa fa-star"></span>
</div>

对应的CSS：

.star-group {
  display: flex;
  gap: 3px; /* 控制星星之间的间距 */
}
.checked {
  color: orange;
}

方案3：排查全局样式干扰 #

如果上述方法无效，检查项目中是否有全局CSS覆盖了<span>的默认样式，比如：

span {
  display: block;
  width: 100%;
}

如果存在这类样式，给星星元素添加专属类名来覆盖：

.star-item {
  display: inline-block;
}

然后给每个星星span加上star-item类：

<span class="fa fa-star checked star-item"></span>

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