水平堆叠CSS元素

时间:2013-11-18 22:33:20

标签: html css

我想知道是否有一种方法可以在不提供宽度的情况下垂直制作容器堆栈的元素。我的意思是我有容器,例如30个图像(宽度为30px),我想在不指定容器宽度的情况下水平显示它们,因为我不知道我有多少项目。所以基本上我想在行中显示元素而不指定容器的宽度,并且当它们在当前没有更多空间时不会将它们分成下一行。我希望我能解释清楚。

1 个答案:

答案 0 :(得分:2)

将图像浮动,使它们堆叠成一排。还要将包装器向左浮动,使其包含内部的内容(这将自动扩展,因为内部的项目数扩展而不需要宽度)

<style>
    #wrapper{
        float:left;
    }

    #wrapper li{
        float:left;
        background:black;
        width:30px;
        height: 30px;
        margin:0 10px 0 0;
    }
</style>

<div id="wrapper">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>

JSFiddle:http://jsfiddle.net/c4NZX/

希望这有帮助!