媒体查询中Flexbox无法移动文本的问题排查求助

云原生阿岚

2026-7-27

问题排查与解决方案

核心原因

你遇到的文本无法左移问题，本质是常规CSS中#footer-text-box的padding-left: 170px规则在移动端媒体查询里没被覆盖。这个超大的左内边距把文本死死挤在右侧，你设置的flex布局属性根本发挥不了作用。

修复步骤

直接在移动端媒体查询的#footer-text-box规则里，覆盖掉那个过大的左内边距，同时可以去掉不必要的height:50%（除非你给父容器设置了明确高度，否则这个属性会导致布局异常）：

/* Mobile Footer */

#footer-container {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 0px;
}

#footer-text-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 去掉不必要的height:50%，避免无父容器高度时布局异常 */
    padding-top: 25px;
    /* 覆盖常规样式的大左内边距，可根据需求调整为20px这类适配移动端的小值 */
    padding-left: 0;
    background-color: #F3FFFF;
    /* 可选：添加该属性确保子元素完全左对齐 */
    align-items: flex-start;
}

/* 其余规则保持不变 */
#footer-header {
    font-size: 1.5em;
    font-weight: 700;
    color: #282f57;
}

#footer-text {
    width: 80%;
    font-size: 0.7em;
    height: 200px;
    line-height: 2;
    color: #282f57;
}

#action-box {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
}

#action-arrow {
    width: 1.5em;
    margin-right: 10px;
    margin-left: 10px;
}

#action-text {
    font-size: 0.9em;
    font-weight: 700;
}

#footer-image {
    width: 100%;
    height: 50%;
}