嘿，我来帮你捋捋为啥加了inline-block还是只显示一本图书——咱们先看代码里的几个核心问题，再一步步调整：

问题根源分析 #

1. 绝对定位导致封面重叠：你给.slide-image加了position: absolute，这会让所有图书封面都挤在同一个位置，自然只能看到最上层那本。
2. 图片宽度设置冲突：.slide-image img里同时写了width: 20%和min-width: 100%，这会强制图片占满父容器，根本没法并排。
3. 容器布局逻辑没理顺：.slide-container的white-space: nowrap思路是对的，但内部元素的定位方式完全错了，没法横向排列。

解决方案：调整结构+样式 #

第一步：补全HTML结构（确保每个Slide有3个图书项）

先把你的HTML补全，保证每个slide-container里有3个图书封面容器：

<div>
  <div class="carousel">
    <ul class="slides">
      <input type="radio" name="radio-buttons" id="img-1" checked />
      <li class="slide-container">
        <div class="slide-image">
          <img src="Bookaholic/img/DearData_US_jacket.jpeg" >
        </div>
        <div class="slide-image">
          <img src="Bookaholic/img/DearData_US_jacket.jpeg" >
        </div>
        <div class="slide-image">
          <img src="Bookaholic/img/DearData_US_jacket.jpeg" >
        </div>
      </li>
      <!-- 可以继续添加更多slide-container实现多组轮播 -->
    </ul>
  </div>
</div>

第二步：修改核心CSS样式

把冲突的定位、宽度属性改掉，用更靠谱的布局方式实现并排：

ul.slides { 
  display: block; 
  position: relative; 
  height: 600px; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  list-style: none; 
}

/* 用flex布局让内部图书横向排列，比inline-block更易控制 */
.slide-container { 
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around; /* 让图书间保持均匀间距，也可以用gap: 20px自定义 */
  align-items: center;
}

/* 去掉绝对定位，让图书正常参与布局 */
.slide-image { 
  display: block;
  width: 30%; /* 每个图书占Slide的1/3左右，可根据需求调整 */
  height: 80%; /* 控制图书显示高度 */
  opacity: 1; /* 默认显示，轮播切换的transition逻辑可以保留原有的 */
}

/* 让图片自适应容器，避免拉伸变形 */
.slide-image img { 
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图书封面的比例，不会被压扁或拉伸 */
}

额外适配提示

原Codepen的轮播是基于单选按钮切换单个Slide的，现在每个Slide是3本书的组合，你需要确保切换动画是作用在整个slide-container上，而不是单个图书项。原有的单选按钮控制逻辑可以继续用，但要把transition动画的目标从.slide-image改成.slide-container，这样切换时是整组图书一起变化。

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