CSS 浮动元素从其父元素移出

Question

在我的应用程序中，有一个部分列出了文章。显示标题和作者。问题是，当作者无法将标题放入一行，但标题不够长，无法分成两行时，作者（“作者”）将位于边框的中间，如下所示：

我对

float

属性了解不多（对于 Less 也是如此），我唯一知道的是它可以将东西移动到所有 DOM 兄弟的左侧或右侧。如何确保这个“由某人”

span

不会像这样从布局中移出（相反，它会使父级增加其大小）？

我的代码（我使用 Less 来设计它）：

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}

<span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

注意我使用了

a

元素，因为在我的真实应用程序中它链接到某个地方。

Answer 1

我认为你可以通过添加“width:100%; float:left;”来解决这个问题像这样的 a.post 样式：

a.post {
  text-decoration: none;
  padding: 10px;
  display: block;
  cursor: pointer;
  width:100%;
  float:left;

  &:not(:last-child) {
    border-bottom: #aaa solid 1px;
  }

  &:hover {
    background: #f5f5f5;
  }

  &:active {
    background: #eee;
  }

  .author {
    float: right;
  }
}

<span>
  <a class="post">
    <b>The best article you've ever seen</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 2</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen but it has a very very long title.</b>
    <span class="author">by Someone</span>
  </a>
  <a class="post">
    <b>The best article you've ever seen 3</b>
    <span class="author">by Someone</span>
  </a>
</span>

如果宽度 100% 超出了容器的宽度，您可以添加“box-sizing: border-box;”所以它的内边距是按 100% 宽度计算的，而不是添加到其中。

我希望这有帮助！问候。