如何让卡片内元素横向排列？前端布局问题求助

核心方案：用Flexbox修改布局 #

块级元素默认是垂直堆叠的，margin、padding只能调整间距，没法改变排列方向。给父容器启用Flex布局是最直接的解决方式：

1. 调整.crypto-card的CSS #

给卡片容器添加Flex相关属性：

.crypto-card {
  display: flex; /* 启用Flex布局，子元素默认横向排列 */
  align-items: center; /* 子元素垂直居中，可根据参考图调整为flex-start/end */
  gap: 1.2rem; /* 子元素之间的间距，替代逐个加margin更高效 */
  /* 保留你原有样式里的padding、border、背景色等属性 */
}

2. 子元素的可选调整 #

如果需要子元素均分容器宽度，给子元素加flex: 1；如果要固定宽度，直接设置width值即可：

.crypto-card > * {
  flex: 1; /* 所有子元素平分容器宽度，按需选择 */
  /* 或者写死宽度：width: 200px; */
}

3. 响应式适配（可选） #

如果需要在小屏幕上恢复垂直排列，添加媒体查询：

@media (max-width: 768px) {
  .crypto-card {
    flex-direction: column; /* 小屏幕下切换为垂直排列 */
    align-items: flex-start; /* 调整垂直排列时的对齐方式 */
  }
}

为什么margin/padding没用？ #

margin和padding仅能修改元素的内外间距，无法改变HTML块级元素默认的垂直流布局规则，只有通过修改父容器的display属性（如flex、grid），才能彻底改变子元素的排列方向。

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