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

Fill remaining horizontal width without a fixed width

本文关键字：水平 余水平 固定宽度 填充      更新时间：2023-12-29

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

我正在尝试在span旁边浮动宽度可变的文本，我想填充剩余的空间。

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;
}
<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>

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

请注意，宽度设置为100%时，它会落到下面的行。

如果你愿意使用flexbox，它可以很容易：

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

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

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;
}
<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>

相关文章：