填充剩余的水平宽度，没有固定的宽度

Question

我试图浮动两个元素并使第二个元素仅使用CSS填充剩余的宽度空间，但是更多的答案＆amp;研究我看起来可能需要使用JS。

我试图在span旁边浮动可变宽度的文字，我希望填充剩余空间。

＆＃13;

＆＃13;

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list span {
  font-size: 14px;
  float: l margin: 0px 5px;
}
span.filter-pill {
  border-radius: 4px;
  width: 100%;
  margin-left: 12px;
  height: 10px;
  display: inline-block;
}

＆＃13;

<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

JSFiddle - https://jsfiddle.net/1466qdab/

注意，宽度设置为100％，它落在下面的行。

Answer 1

如果您愿意使用flexbox，则可能非常简单：

ul#filter-list a {
  display: flex;
}

此外，使用align-items: center;垂直居中。

＆＃13;

＆＃13;

ul#filter-list {
  list-style: none;
  padding-left: 0px;
}
ul#filter-list a {
  display: flex; /*added*/
  align-items: center; /*added*/
}
ul#filter-list span {
  font-size: 14px;
  margin: 0px 5px;
}
span.filter-pill {
  flex: 1; /*added*/
  border-radius: 4px;
  margin-left: 12px;
  height: 10px;
}

＆＃13;

<ul id="filter-list">
  <li>
    <a href="{{ route('question.index') }}">
      <span>All</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
  <li>
    <a href="{{ route('question.index') }}">
      <span>a big filter name here</span>
      <span style="background: #5fbeaa" class="filter-pill"></span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;