水平滚动列表中卡片因标题行数不同偏移，求修复方案

我在水平滚动布局中展示多张卡片，卡片标题文本超过两行时会被截断。为实现水平滚动，我使用了white-space: nowrap和overflow-x: auto属性；为实现文本截断效果，需为标题设置white-space: normal，并配合display: -webkit-box、-webkit-line-clamp: 2等属性。但现在出现问题：卡片会根据标题的行数（一行或两行）产生偏移。

我的代码如下：

.list {
  padding-left: 36px;
  white-space: nowrap;
  overflow-x: auto;
}

.card {
  border: 1px solid black;
  margin: 10px;
  width: 200px;
  height: 310px;
  display: inline-block;
}

.card--title {
  margin: 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

修复方案 #

问题根源是inline-block元素默认以**基线（baseline）**对齐，当卡片内标题高度不一致时，就会出现偏移。

方案1：修改垂直对齐方式

给.card添加vertical-align: top，强制所有卡片顶部对齐：

.card {
  border: 1px solid black;
  margin: 10px;
  width: 200px;
  height: 310px;
  display: inline-block;
  vertical-align: top; /* 新增属性 */
}

方案2：改用Flexbox布局

Flexbox天生能更好地控制元素对齐，替换原有的水平滚动实现：

.list {
  padding-left: 36px;
  display: flex;
  gap: 10px; /* 替代margin实现卡片间距 */
  overflow-x: auto;
}

.card {
  border: 1px solid black;
  width: 200px;
  height: 310px;
  flex-shrink: 0; /* 防止卡片被压缩变形 */
}

两种方案都能解决标题行数不同导致的卡片偏移问题，Flexbox方案更符合现代布局规范，推荐优先使用。

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