使用CSS从底部到顶部浮动div？

Question

我正在显示一组需要在响应式布局中包装的选项卡。是否可以将它们包裹起来以便它们与底部对齐？

以下是他们目前的包装方式：

我想消除顶行下方的空间，以便顶部只有1个标签，底部有4个标签。这是一个响应式布局，所以它需要流畅。我正在寻找一个纯CSS解决方案。

这是我的代码：

#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}

#tabs ul {
    list-style:none;
    margin:0;
    padding:0;
}

#tabs li {
    float:left;
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
}

<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 1</span></a></li>
        <li><a href="#"><span>Tab 2</span></a></li>
        ... etc ...
     </ul>
    <div style="clear:both;"></div>
</div>

这是一个jsfiddle：http://jsfiddle.net/PGypn/

Answer 1

您可以使用此CSS3属性：flex-wrap: wrap-reverse。

#tabs ul {
    display: flex;
    flex-wrap: wrap-reverse;
    list-style:none;
    margin:0;
    padding:0;
}
#tabs li {
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
    
}
#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}

<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 0</span></a>
        </li>
        <li><a href="#"><span>Tab 1</span></a>
        </li>
        <li><a href="#"><span>Tab 2</span></a>
        </li>
        <li><a href="#"><span>Tab 3</span></a>
        </li>
        <li><a href="#"><span>Tab 4</span></a>
        </li>
        <li><a href="#"><span>Tab 5</span></a>
        </li>
        <li><a href="#"><span>Tab 6</span></a>
        </li>
        <li><a href="#"><span>Tab 7</span></a>
        </li>
        <li><a href="#"><span>Tab 8</span></a>
        </li>
        <li><a href="#"><span>Tab 9</span></a>
        </li>
    </ul>
</div>

fiddle

Answer 2

以下是您的解决方案：

#tabs li {
    display:block;
    width:100%;
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
    text-align:center;
}

由于