如何使用CSS的inline-block属性实现3个卡片横向排列？

先明确核心逻辑：要实现卡片横向排列，正确操作是给包裹卡片的父容器设置flex布局，而非给卡片本身添加flex属性。你之前的操作可能搞反了作用对象，或是存在隐藏的CSS规则冲突导致布局失效。

常见失效原因及对应解决方法 #

1. 错误将flex属性应用在子元素上
   flex布局的生效逻辑是：父容器设置display:flex后，其直接子元素会自动成为flex项并横向排列。你给.card加display:flex只会让卡片内部元素启用flex布局，和卡片本身的横向排列无关。

2. 卡片总宽度超出父容器范围
   若卡片宽度未合理控制，总宽度超过父容器时会自动换行。可以用flex:1让卡片平分父容器宽度，或设置固定宽度（比如width:30%），同时记得添加box-sizing:border-box，避免内边距、边框额外增加总宽度。

3. 存在冲突的CSS规则
   检查卡片是否设置了float、position:absolute这类脱离文档流的属性——这些属性会直接破坏flex或inline-block布局，需移除。

可直接运行的示例代码 #

<div class="card-container">
  <div class="card">卡片内容1</div>
  <div class="card">卡片内容2</div>
  <div class="card">卡片内容3</div>
</div>

/* 全局重置，避免默认样式干扰布局 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card-container {
  display: flex; /* 父容器启用flex布局，核心属性 */
  gap: 1.2rem; /* 卡片之间的间距，比margin更易维护 */
  padding: 1rem;
  /* 若需要小屏幕自动换行，可添加 flex-wrap: wrap; */
}

.card {
  flex: 1; /* 让所有卡片平分父容器宽度 */
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
}

用inline-block实现的注意事项（不推荐，仅作参考） #

如果一定要用inline-block方案，需注意两个关键点：

• 给.card设置display: inline-block; width: 30%;
• 移除HTML中卡片之间的空白字符（比如把卡片标签写在同一行），或给父容器设font-size: 0;，再给.card恢复font-size: 16px;，避免空白字符占据宽度导致换行。

排查技巧 #

打开浏览器开发者工具（F12），查看父容器和卡片的CSS属性：

• 确认父容器的display:flex没有被其他规则覆盖（比如带有!important的样式）
• 检查卡片的总宽度（内容+内边距+边框）是否超出父容器范围

内容的提问来源于stack exchange，提问作者Fadzai Emmah Nembaware