锚标签未正确对齐css

Question

我的html中有一个div和锚标记，我已经给了浮动以使它们彼此内联。但是当div的文本在两行中而没有修改给定的html时，锚标签会以新的一行出现。

这是尝试过的。

CSS：

.relative{
  border: 1px solid #000;
  position: relative;
  margin: 0 auto 20px;
  max-width: 940px;
}
.absolute{
  position: absolute;
  width: 100%;
  z-index: 5;
  border: 1px solid red; 
}
.content {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 21px;
    color: #333333;
}
.content p {
    float: left;
}
.content a, .content div {
    float: left;
    line-height: 21px;
}
.content div, .content a {
    padding-right: 10px;
}

HTML：

<div class="relative">
  <div class="absolute">
    <div class="content">
      <p><span></span></p>
      <div>Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW## Sample Text ##TOTAL_ACTIVITY_INCLUDE_RECENT_VIEW##</div>
      <p></p>
      <a href="#" class="">myLink</a>
    </div>
  </div>
</div>

Fiddle

Answer 1

div{
  display:flex;
}

这将起作用

Answer 2

将display: inline;添加到.content a并放弃float: left;

所以你现在有：

.content a, .content div {
    display: inline;
}

预期产出：

<强>

<强> Check it out.