[英]Fill remaining horizontal width without a fixed width
I'm trying to float two elements and make the second element fill the remaining width space using only CSS, but the more answers & research I do looks like I might need to use JS. 我试图浮动两个元素并使第二个元素仅使用CSS来填充剩余的宽度空间,但是我做的更多答案和研究似乎需要使用JS。
I'm trying to float text with a variable width next to span
which I want to fill the remaining space. 我正在尝试在要填充剩余空间的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/ JSFiddle- https: //jsfiddle.net/1466qdab/
Note with the width set to 100% it falls to the line under. 注意,将宽度设置为100%时,它会落在下面的行上。
If you're willing to use flexbox , it can be pretty easy: 如果您愿意使用flexbox ,那就很简单了:
ul#filter-list a {
display: flex;
}
In addition, use align-items: center;
另外,使用align-items: center;
for centering vertically. 用于垂直居中。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.