如何在Angular/HTML/CSS中实现与垂直列表样式一致的水平滚动条

问题核心是垂直列表的flex-wrap: wrap属性会让列表项自动换行，导致水平滚动时堆叠，只需调整容器和列表的Flex布局属性即可解决：

修改后的完整代码 #

HTML结构 #

把垂直列表的ul嵌套到水平滚动容器中，同时修正原垂直列表的结构错误（将img和content放入<a>标签内）：

<div class="horizontal-scroll-wrapper">
  <ul>
    <li *ngFor="let p of plants">
      <a routerLink="/detail/{{p.id}}">
        <img [src]="p.imageUrl[0]">
        <div class="content">
          <div class="name">{{p.name}}</div>
          <div class="rating">
            <span class="star">⋆</span> {{p.rating}}
          </div>
          <div class="detail">{{p.price | currency}}</div>
        </div>
      </a>
    </li>
  </ul>
</div>

CSS样式调整 #

/* 水平滚动容器 */
.horizontal-scroll-wrapper {
  max-height: 28rem; /* 根据列表项高度调整，确保容纳完整内容 */
  overflow-x: auto;
  padding: 0.5rem 0;
}

/* 覆盖垂直列表的ul样式，强制横向排列 */
.horizontal-scroll-wrapper ul {
  display: flex;
  justify-content: flex-start; /* 从左开始排列，替代原居中逻辑 */
  align-items: center;
  flex-wrap: nowrap; /* 关键：禁止换行，保持横向排列 */
  list-style-type: none;
  padding: 0;
  margin: 0;
  gap: 0.5rem; /* 用gap统一控制项间距，替代margin更稳定 */
}

/* 保留垂直列表的项样式 */
li a {
  height: 12.5rem;
  width: 10rem;
  border: 1px solid violet;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: darkolivegreen;
}

li a:hover {
  opacity: 0.9;
  cursor: pointer;
}

li a img {
  object-fit: cover;
  height: 14.5rem;
}

.content {
  margin-top: 0.3rem;
  margin-left: 1rem;
  padding: 0.5rem 1rem; /* 修正原代码的笔误 */
  position: relative;
  height: 7rem;
  background-color: aqua;
}

/* 可选：优化滚动条样式 */
.horizontal-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.horizontal-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.horizontal-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.horizontal-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

关键修改点说明 #

1. 容器层：添加overflow-x: auto开启横向滚动，设置合适max-height避免容器高度异常
2. 列表层：将ul的flex-wrap: wrap改为nowrap，同时调整justify-content为flex-start，确保列表项从左到右不换行
3. 结构修正：把img和content移动到<a>标签内部，保持垂直列表的链接包裹逻辑，避免样式错位
4. 间距优化：用gap替代margin控制列表项间距，布局更稳定

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