求助：如何将飞机图标精准对齐CSS渐变线条粗段的最右端

实现方案 #

你当前用固定margin-left控制飞机位置的写法只在特定屏幕宽度下生效，窗口尺寸变化就会错位，改用相对定位+绝对定位的组合可实现永久精准对齐，修改后的完整代码如下：

CSS代码

/* 父容器开启相对定位作为子元素的定位基准 */
.divider {
  position: relative;
  border: 1em solid transparent;
  padding: 1em;
}

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px; /* 该值需和下方plane的right值完全一致 */
  margin-left: 80px;
  overflow: visible;
  height: 10px; /* 可根据需要调整渐变条的粗细 */
  padding: 0;
}

.plane {
  position: absolute;
  right: 200px; /* 和#two的margin-right保持一致，自动对齐渐变条最右端 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐渐变条中线 */
  padding: 0.5em;
}

HTML代码（无需修改）

<div class="divider">
  <div id="two"></div>
  <div class="plane">✈</div>
</div>

后续如果要调整渐变条的右侧留白，只要同步修改#two的margin-right和.plane的right值即可，始终保持两者一致就能保证对齐效果。

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