外贸社区 - 交流学习，提升技能 - 常规

问答交流

提出问题并向他人学习

知识库

学习和分享知识

精品课程

按专业方向提升技能

企业故事

成功经验交流

下载中心

使用外贸资料下载

#community .container .menu { display: flex; gap: 24px; }

    #community .container .menu .box {
        cursor: pointer;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        height: 72px;
        background-color: #FFFFFF;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    }

    #community .container .menu .box .img {
        height: 36px;
        margin-right: 8px;
    }

    #community .container .menu .box .title {
        font-size: 16px;
        font-weight: 600;
    }

    #community .container .menu .box .detail {
        font-size: 12px;
        color: #666666;
    }

要让img和title、detail在同一行，可以使用flex布局。将.box设置为display: flex，并设置justify-content: center和align-items: center，使内容在水平和垂直方向上居中对齐。同时，可以给img设置margin-right属性，为title和detail留出间距。

修改后的CSS代码如下：

#community .container .menu .box {
    cursor: pointer;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 72px;
    background-color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
}

#community .container .menu .box .img {
    height: 36px;
    margin-right: 8px;
}

#community .container .menu .box .title {
    font-size: 16px;
    font-weight: 600;
}

#community .container .menu .box .detail {
    font-size: 12px;
    color: #666666;
}

这样，img、title和detail就会在同一行显示了。