如何实现图片内联排列？解决Cabinet、Wishlist、Cart图标纵向堆叠问题

你的问题出在.right-buttons内部的子元素布局上，当前设置display: inline无法很好地容纳图标和下方的文字块，导致元素堆叠。可以通过以下CSS调整来实现需求：

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 新增，避免宽高计算偏差 */
}
.header-top {
    width: 100%;
    height: 50px;
    background-color: rgb(252, 238, 212);
    background-image: url("../images/top-img.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.header-search {
    width: 84%;
    height: 60px;
    background-color: rgb(61, 44, 130);
    padding: 20px 8%;
    display: flex; /* 可选，让logo、search、right-buttons横向对齐更稳定 */
    align-items: center; /* 垂直居中 */
}
.logo {
    width: 100px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
.search {
    width: 929px;
    height: 50px;
    display: inline-block;
    background-color: green;
    margin: 0 20px; /* 新增，增加和logo、right-buttons的间距 */
}
.right-buttons {
    width: 250px;
    height: 50px;
    display: flex; /* 用flex让子元素横向排列 */
    justify-content: space-around; /* 均匀分布子元素 */
    align-items: center; /* 垂直居中 */
    background-color: yellow;
}
.logo>img {
    width: 40px;
}
.right-buttons img {
    width: 30px;
    height: 30px;
    /* 去掉margin-right，用flex的间距控制 */
}
.right-buttons span {
    width: 30px;
    height: auto; /* 高度自适应文字 */
    text-align: center; /* 文字居中 */
    display: block;
}
.right-buttons div {
    display: flex; /* 每个图标容器用flex纵向排列 */
    flex-direction: column; /* 图标在上，文字在下 */
    align-items: center; /* 内部元素水平居中 */
}
.search form input {
    height: 30px;
    width: 700px;
    margin-right: 0;
    padding-right: 0;
}
.search form button {
    height: 30px;
    width: 70px;
    margin-left: 0;
    padding-left: 0;
}

关键调整点 #

• 给.right-buttons添加display: flex，配合justify-content: space-around让三个图标容器横向均匀分布
• 把每个图标容器（.right-buttons div）设置为flex-direction: column，让图标和文字垂直排列，同时用align-items: center保证内部元素居中
• 移除图标和文字的margin-right，改用flex布局的间距控制，避免间距混乱
• 可选：给.header-search添加display: flex和align-items: center，让顶部导航的三个模块垂直居中对齐，布局更稳定

这样修改后，三个图标会横向排列，文字整齐地显示在对应图标下方。

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