Font Awesome图标右侧定位问题：position与margin调整无效求助

给你几个实战里常用的解决办法，直接套用就能搞定：

方法1：Flex布局（最推荐，灵活适配） #

利用Flex的空间分配特性，轻松控制文字和箭头的位置，还能保证垂直居中：

.right-arrow {
  /* 如果a标签是行内元素，改成inline-flex；如果要占满容器宽度，用flex */
  display: inline-flex;
  align-items: center;
  /* 控制文字和箭头的间距，可根据需求调整 */
  gap: 8px;
}

/* 如果需要箭头完全贴在a标签的最右侧（比如a是块级元素时），改成下面的写法： */
/* .right-arrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px; 或者让它继承父容器宽度
} */

方法2：绝对定位（适合需要精确控制位置的场景） #

给父元素（.right-arrow）设置相对定位，再把箭头设为绝对定位，就能固定到右侧：

.right-arrow {
  position: relative;
  /* 给箭头留出空间，避免和文字重叠 */
  padding-right: 22px;
  /* 改成inline-block或block，根据你的布局需求 */
  display: inline-block;
}

.right-arrow i {
  position: absolute;
  right: 0;
  /* 垂直居中对齐 */
  top: 50%;
  transform: translateY(-50%);
}

方法3：浮动布局（简单直接的传统方案） #

通过浮动让箭头靠右，同时保证文字正常排列：

.right-arrow {
  display: block;
  /* 清除浮动影响，避免父元素高度塌陷 */
  overflow: hidden;
}

.right-arrow i {
  float: right;
  /* 给箭头和文字之间加间距 */
  margin-left: 8px;
  /* 垂直居中 */
  margin-top: 2px;
}

为什么你之前用margin/position没效果？ #

大概率是因为Font Awesome的<i>标签默认是inline行内元素，行内元素的margin属性只能控制水平方向的间距，但没法让它直接贴到容器右侧；如果直接用position:absolute但没给父元素设置position:relative，箭头会相对于整个页面定位，自然达不到预期效果。

你的原始HTML代码：

<div class="part-3">
    <div class="box">
        <i class="fa-brands fa-galactic-senate"></i>
        <h1>Ui Design</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
        <a href="#" class="right-arrow" >KNOW MORE<i class="fa-solid fa-arrow-right"></i></a>
    </div>
    <div class="box red-box">
        <i class="fa-brands fa-codepen"></i>
        <h1>Product Design</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
        <a href="#" class="right-arrow">KNOW MORE<i class="fa-solid fa-arrow-right"></i></a>
    </div>
    <div class="box">
        <i class="fa-brands fa-mandalorian"></i>
        <h1>Branding</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum</p>
        <a href="#" class="right-arrow">KNOW MORE<i class="fa-solid fa-arrow-right"></i></a>
    </div>
</div>

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