需要帮助将平面添加到一条直线上

Question

我最初将设计作为CSS中的内容值，但尝试将其更改为自己的div并测试是否存在结构问题。 我只需要飞机恰好位于线条粗部的末端。

以下是痛苦接近的图片：

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  border: 1em 1em 1em 1em;
  padding: 1em 1em 1em 1em;
}

.plane {
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-left: 1150px;
  margin-bottom: 100px;
}

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

- eShad0

Answer 1

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  overflow: visible;
  height: 1px;
  padding: 0;
  border-bottom: 10px;
}

.divider {
  position: relative;
  padding: 1em;
  margin-top: 70px;
}

.plane {
  position: absolute;
  top: -1px;
  right: 0;
  padding: 0.5em;
  bottom: 0;
}

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

- Aman Sharma

---

这太奇怪了。在大屏幕上，Windows 上的 Chrome 完美无缺，而在 OSX 上的 Chrome 在大屏幕上则有一半像素偏差。在小型笔记本电脑上，Windows 上的 Chrome 则有 2 像素偏差。 - mplungjan

这很奇怪，但代码仍然很好，谢谢你的帮助。 - eShad0

Answer 2

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  position: relative;
}

.plane {
  position: absolute;
  top: -.7rem;
  right: 12rem;
  margin-left: 0;
  margin-right: 0;
}

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

- Todor Markov

---

@mplungjan，那你只是编辑了什么？只有 padding。 - Aman Sharma

我只是把它放在代码片段中，这样我们就可以看到它是否有效。请保留在代码片段中。现在它有效了。 - mplungjan

感谢您的帮助，这已经解决了问题。 - eShad0

Answer 3

简单的事情，您可以做的就是在.plane上添加position: absolute;和Top: 4px;

#two {
  background-size: 100%;
  background-image: linear-gradient(to right, #ffffff, #000000);
  margin-right: 200px;
  margin-left: 80px;
  overflow: visible;
  height: 1px;
  padding: 0.0em 0.0em 0.0em 0.0em;
  border-bottom: 10px;
}

.divider {
  border: 1em 1em 1em 1em;
  padding: 1em 1em 1em 1em;
}

.plane {
  padding: 0.5em;
  margin-left: 1145px;
  margin-bottom: 100px;
  position: absolute;
  right: 0;
  margin-right: 200px;
  top: 4.3px;
}

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

- Krishna Noutiyal

---

@mplungjan，你想要一个居中的平面的答案，你得到了吗？无论如何，我将复制片段以方便回答。 - Krishna Noutiyal

@mplungjan 很高兴能帮助你!! - Krishna Noutiyal

@mplungjan 哦，是的。抱歉，我忘记添加 position: absolute; 。我的错。 - Krishna Noutiyal

你在全屏模式下打开了它吗？ - Krishna Noutiyal

它在Chrome中看起来如此美丽，这是怎么可能的？ - Krishna Noutiyal