有一个完整的lt; div>float正确，其中包含a< p>元素和a< a>元素

Question

我试图将整个div浮在右侧，其中包含元素p和a保留在同一条线上（现在a元素移动到p以下）。如何将它们放在同一条线上？fiddlefiddle

我的html：

<div class="go-here"><p>Go here: </p><a href="www.placehold.it" target=
                        "_blank">Placehold</a></div>

和CSS

.go-here a:link {
    font-size:18px;
    color:#ED152F
}
.go-here p {
    font-size:12px;
    color:#000000
}
.go-here {
    float: right
}

Answer 1

简单地将<a>放入<p>中：

.go-here a:link {
    font-size:18px;
    color:#ED152F
}
.go-here p {
    font-size:12px;
    color:#000000
}
.go-here {
    float: right
}
Simple as putting <a> inside <p>:

<div class="go-here"><p>Go here: <a href="www.placehold.it" target=
                        "_blank">Placehold</a></p></div>

Answer 2

可能过高，但我喜欢flexbox魔术：

.go-here {
    display: flex;
    align-items: center;
}

.go-here {
  display: flex;
  align-items: center;
  float: right;
}
.go-here a:link {
  font-size: 18px;
  color: #ED152F;
}
.go-here p {
  font-size: 12px;
  color: #000000;
}

<div class="go-here">
  <p>Go here:</p>
  <a href="//example.com" target="_blank">Example</a>
</div>