如何实现9个带下方文字的图片横向排列？HTML/CSS布局求助

你的代码存在两个核心问题：

• vertical-align: horizontal 是无效属性，vertical-align仅用于控制垂直方向的对齐，没有horizontal这个取值，需要移除或替换为合理值（比如vertical-align: top）。
• 9个inline-block元素可能因总宽度超出父容器、或元素间默认空白间距导致换行。

下面提供两种可行的解决方法：

方法1：修复inline-block布局 #

步骤1：修正滑块项的CSS #

.sliderItem {
    /* 移除无效属性，替换为垂直对齐方式 */
    vertical-align: top;
    display: inline-block;
    text-align: center;
    /* 固定宽度避免内容撑开宽度不一致 */
    width: 130px;
    /* 消除inline-block元素间的默认空白间距 */
    margin-right: -4px;
}

.caption {
    display: block;
}

步骤2：确保父容器适配 #

给包含所有.sliderItem的父容器设置足够宽度，或开启横向滚动避免换行：

.sliderContainer {
    width: 100%;
    overflow-x: auto;
    padding: 0;
    margin: 0;
}

对应的HTML结构：

<div class="sliderContainer">
    <div class="sliderItem">
        <img src="./image/Accessories.png" width="130" height="80" alt="" class="sliderImg">
        <span class="caption">Accessories</span>
    </div>
    <!-- 其余8个sliderItem重复上述结构 -->
</div>

方法2：使用Flex布局（推荐） #

Flex布局是现代CSS中实现水平排列的更简洁方案，无需处理inline-block的空白问题：

父容器CSS #

.sliderContainer {
    display: flex;
    /* 子项一行排列，超出则横向滚动 */
    overflow-x: auto;
    /* 设置子项间的间距 */
    gap: 10px;
    padding: 0;
    margin: 0;
}

滑块项CSS #

.sliderItem {
    text-align: center;
    width: 130px;
}

.caption {
    display: block;
}

HTML结构和方法1一致，所有.sliderItem放在.sliderContainer内即可。

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