html - 将底部边框放在页面右上角 Logo 下方的 CSS 问题

Question

我正在尝试在页面右上角的 Logo 下方添加边框。

在我将 position:absolute; 添加到 div 之前，我的 2 个 Logo 放置在我希望它们位于右上角“联系我”下方的位置。但是页面左侧的边框，当我放置 position:absolute; 时它会移动，但 Logo 会跳到页面下方。

css #para {
  margin-right: 1.66%;
  float: right;
  font-family: indie flower;
  position: absolute;
  top: 0px;
  right: 0px;
}

.fb {
  width: 27px;
  float: right;
  right: 5px;
  position: absolute;
  margin-top: 3px;
  top: 35px;
}

#in {
  margin-top: 4px;
  width: 25px;
  float: right;
  position: absolute;
  right: 40px;
  top: 35px;
}

div {
  border-bottom: 1.5px solid red;
  width: 60px;
  right: 5px;
  position: absolute;
}

<p id="para">Contact me </p>
<div>
  <img class="fb" width="10" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
  <img id="in" width="25" src="https://image.flaticon.com/icons/png/512/69/69366.png">
</div>

Answer 1

只需使用 float: right在你的 #para和 div .使用 <span>与 clear 防止属性 div从重叠。不需要任何绝对定位。如您所见，这大大简化了代码。

.clear {
  display: block;
  clear: both;
}

PS:避免将 CSS 添加到 div 等标签中.

#para {
  margin-right: 1.66%;
  float: right;
  font-family: indie flower;
}

.clear {
  display: block;
  clear: both;
}

.fb {
  width: 27px;
  margin-top: 3px;
}

#in {
  margin-top: 4px;
  width: 25px;
}

#icons {
  float: right;
  border-bottom: 1.5px solid red;
  width: 60px;
}

<p id="para">Contact me </p>
<span class="clear"></span>
<div id="icons">
  <img class="fb" src="https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-512.png">
  <img id="in" src="https://image.flaticon.com/icons/png/512/69/69366.png">
</div>