html - 使 3 个 span 恰好填满一行

Question

我有以下问题:

我在给定宽度的文档中有一行。

现在我有 3 个元素，其中一个是 <a>两个是 <span> .

<a>标签包含一个没有固定宽度的字符串。所以 <a>将具有不同的宽度。

第三个元素，它是一个<span> , 具有固定的宽度，并且必须位于三个容器的右边界。

第二个元素，也就是第一个<span> , 应该恰好位于中间。

直到现在我还没有找到任何方法来实现这一目标。我知道用 table 可能是可能的，但这似乎不是正确的方法。我相信也有一个 CSS 解决方案。

Answer 1

要添加到 display:table; 选项，你有 display:flex; 或 floatting 方法用否定的 margin 对于旧浏览器: DEMO (both methods)

flex :

HTML

<p class="flex"><a href="#"> text as long as needed </a>
<span class="middle">
   text with any width text with any width text with any width text with any width 
</span>
  <span> span </span>
</p>

CSS

.flex {
  display:flex;
}
.middle {
  flex:2;
  white-space:nowrap;
}

---

float小技巧:

HTML

<p class="funny"><a href="#"> text as long as needed </a>
<span class="right"> span </span>
<span class="layout">
  <span> text with any width text with any width text with any width text with any width </span>
</span>
</p>

CSS

a {
  float:left;
  background:#2EAF2E;
  color:#2B3A23;
  text-decoration:none;
}
.right {
  float:right;
  color:white;
  background:#333;
}
.layout {
  display:block;
  overflow:hidden;
  background:#AA2425;
  color:#2B3A23;
}
.layout span {
  display:inline-block;
  margin-right:-9999px;
}