使用CSS自动拉伸列表元素

Question

我有一个ul元素可变的li元素.我希望最后一个li元素始终填充第一行的剩余空间,或者,如果小于预定义的最小值,我希望它移动到一个新行.

图表展示:

我已经尝试过浮动左,浮右,显示块,内联,内联块,表格,最小宽度等各种组合.我无法使其工作.如果有必要,我愿意做javascript路线,但首先我想看看是否有人能在我的CSS中找到它

Answer 1

你想使用一些漂亮的CSS-即删除你的列表和列表项的默认样式,然后浮动每个li左边除了你应用的最后一个,overflow:hidden;以强制它占用剩余的空间.通过给它一个min-width你也指定它应该在某个点之后移动到换行符.

NB.你想要改变200px为250px

演示小提琴

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul, li{
    list-style:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
    height:10px;
}
li{
    float:left;
    border:1px solid red;
    width:100px;
}
li:last-child{
    float:none;/* <--- stop the last item from being floated */
    width:auto;/* <--- make the last item have an automatic width */
    overflow:hidden;/* <--- force it to take up the remaining space */
    min-width:200px; /* <--- except if the remaining space is less than 200px, in which case move it to a new line */
}