Question

我有一个固定高度的div，位于动态无序列表中。

目前列表项溢出了div 需要做的是浮动列表项，以便它们不溢出div。

Answer 1

您可以使用css3列：

HTML：

<div class="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

CSS：

.container{
    background: #00f;
    height: 400px;
    width: 200px;
    overflow: hidden;

  -webkit-column-count: 2;  -webkit-column-gap: 15px;
     -moz-column-count: 2;     -moz-column-gap: 15px;
          column-count: 2;          column-gap: 15px;

}
li
{
    background: #ff0;
    height: 45px;
    margin: 5px 0 0 0;
    width: 50px;
}

Answer 2

您可以将overflow的{{1}}属性设置为各种值。

如果您只希望列表中断，则可以考虑使用div;如果您希望用户能够查看完整列表，则可以考虑使用hidden。

scroll

Example

这假设您的主要标准是列表项不会溢出div。如果您希望以某种方式堆叠项目，那么可以使用不同的方法来实现此目的。主要是将你的李分开并漂浮这些容器。

A List Apart上的Multi Column Lists上有一篇关于此内容的文章。

一旦达到div高度，强制div中的列表项浮动

2 个答案: