如何使列表项中的国旗图标固定显示在右侧？

我把原本4个链接的列表项精简为2个，想在列表项右侧添加国家国旗图标。页面缩小时显示正常，但放大后国旗会偏移到列表项左侧。当前代码如下：

<li><a class="active">Türkçe<img style="position: absolute; height: 23px; width: 34px; top: 0.15em; margin-left: 12%; margin-right: auto;" src="./images/turkey-flag2.jpg" /></a></li>

解决方案 #

方法1：用Flex布局（推荐）

去掉图片的绝对定位，给<a>标签设置Flex布局，让文字和图片自动分布在左右两侧，完全不受页面缩放影响：

<li><a class="active" style="display: flex; align-items: center; gap: 8px;">Türkçe<img style="height: 23px; width: 34px;" src="./images/turkey-flag2.jpg" /></a></li>

• display: flex 把<a>变成弹性容器
• align-items: center 让文字和图片垂直居中对齐
• gap: 8px 给文字和图片之间添加间距，避免挤在一起

方法2：修正绝对定位的基准

如果一定要用绝对定位，必须给父元素<a>设置相对定位，让图片以<a>为参照点，再固定到右侧：

<li><a class="active" style="position: relative; padding-right: 44px;">Türkçe<img style="position: absolute; height: 23px; width: 34px; top: 50%; right: 10px; transform: translateY(-50%);" src="./images/turkey-flag2.jpg" /></a></li>

• position: relative 给<a>设置定位基准，图片的绝对定位会基于它计算
• padding-right: 44px 给图片预留空间，防止文字被遮挡（34px图片宽度+10px右侧间距）
• top: 50%; transform: translateY(-50%) 让图片垂直居中
• right: 10px 固定图片在<a>的右侧位置

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