Question

我有一个div里面有很多ul ..我想完全适合它们......相同的高度，宽度，填充和等等，无论多少ul我放入div ...如果只有两个ul，我希望它们能够完美贴合，如果我添加另一个，我希望它也能完美贴合。可能吗？在设计方面不是很好......

这里是你玩弄的小提琴：http://jsfiddle.net/SUBH3/104/

提前感谢。

Answer 1

使用dl dt来适应它们。我现在无法打开jsfiddle.net，看看你是否想要：

<style>
#wrap{
    width:100%;
    padding:10px;
    background-color:blue;
}

dl{
    list-style-type:none;
    display:inline-block;

}

dd{
    float: left;
}
</style>
<div id = "wrap">
    <dl>
        <dd>
            <ul>
                <li>SampleContent1</li>
                <li>SampleContent2</li>
                <li>SampleContent3</li>
                <li>SampleContent4</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
        <dd>
            <ul>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
                <li>SampleContent2</li>
            </ul>
        </dd>
    </dl>
</div>

Answer 2

你期待这样的事吗。

#wrap{
    width:100%;
    padding:10px;
    background-color:blue;
}

ul{
    list-style-type:none;
    display:inline-block;
    float:left;
}

li {clear:both}

jsFiddle

适合div的元素内容

2 个答案: