小屏幕下Font Awesome图标与文本错位问题求助

你的联系模块在桌面端显示正常，但到500px以下的移动端时，文本会跑到图标下方无法对齐——本质是仅靠硬编码空格分隔图标和文本，没有明确的布局约束，当容器宽度不足或字体尺寸变化时，就会出现换行错位。下面是几种直接有效的解决方法：

方法1：Flex布局（最推荐，兼容性强） #

通过给每个联系项添加Flex布局，强制图标和文本在同一行，同时保证垂直居中，用gap替代空格控制间距，更可控。

修改后的CSS：

.content-card{
    max-width: 100vw;
    padding: 0 2em 0;
}
.contact-options-wrapper{
    padding: 1em 0em; 
}
.fs-contact-info{
    font-size: clamp(1vw, 4vw, 1.5em);
}
/* 新增：控制每个联系项的布局 */
.contact-options-wrapper div {
    display: flex;
    align-items: center;
    gap: 0.8em; /* 图标与文本的间距，可按需调整 */
    margin-bottom: 0.6em; /* 可选：给两个联系项添加垂直间距 */
}

对应的HTML（去掉硬编码的   ）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">    
<div class="content-card">        
    <div class="fs-contact-info contact-options-wrapper">
        <div><a href="mailto:myemail_12345@gmail.com"><i class="fa-solid fa-envelope"></i> myemail_12345@gmail.com</a></div>
        <div><a href="tel:+46123456789"><i class="fa-solid fa-phone"></i> +46 12 345 67 89</a></div>
    </div>              
</div>

方法2：Inline-block垂直对齐 #

如果不想用Flex，也可以通过设置图标为inline-block，强制和文本垂直对齐：

新增CSS：

.fs-contact-info i {
    display: inline-block;
    vertical-align: middle; /* 与文本基线对齐 */
    margin-right: 0.8em; /* 图标右侧间距 */
}

HTML同样可以去掉硬编码空格，保持简洁。

方法3：Grid布局（适合精细控制） #

用Grid给图标和文本分配固定列，确保它们始终在同一行：

新增CSS：

.contact-options-wrapper div {
    display: grid;
    grid-template-columns: auto 1fr; /* 图标宽度自适应，文本占剩余空间 */
    gap: 0.8em;
    align-items: center;
}

关键注意点 #

• 避免用 这种硬编码空格控制间距，改用gap或margin，适配性更强
• 无论哪种方法，核心是给图标和文本的容器添加明确的布局规则，强制它们在同一行并对齐

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