格式化链接元素

Question

我需要在图片上设置正确的元素，但是当我使用＆＃39; pull-right＆＃39; class，由于某种原因也会影响底部元素的宽度。

<a class="pull-right">My link</a>
<div class="input-group margin-top-md">
    <!--->It is bottom element <--->
</div>

Answer 1

如果您忘记设置上一个元素的float: right，则这是position的预期行为。如果您将左上方容器的位置更改为position: absolute，您会看到链接移到顶部但仍然向右浮动。

我建议使用CSS flex来设置样式。

＆＃13;

＆＃13;

.pull-right {
  display: flex;
  align-items: center;
}

.test {
  display: flex;
  width: 100%;
  height: 50px;
  background: red;
}

.test1 {
  display: flex;
  width: 100%;
  height: 50px;
  background: blue;
}

.test2 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 50px;
  background: green;
}

.input-group {
  width: 100%;
  height: 50px;
  background: yellow;
}

＆＃13;

<div class="test">

  <div class="test1">

  </div>

  <div class="test2">
    <a class="pull-right">My link</a>
  </div>

</div>

<div class="input-group margin-top-md">

</div>

＆＃13;

＆＃13;

＆＃13;