Html 将li元素划分为列-CSS设计问题

这是我试图编写的演示代码。请帮帮我

主容器{ 宽度：100%； 身高：100%； 空白：nowrap； 背景：棕色； } 保险商实验室{ 列表样式：无； } 主容器>ul{ 列计数：自动； -webkit列计数：自动； -moz列控制：自动； 列宽：300px； -webkit列宽：300px； -moz列宽：300px； 背景：黄色； } mainContainer>ul>li{ 显示：内联块； 高度：50px； } id1 li， id2 li{ 背景：蓝色； 填充：1%； 边界半径：5px； 宽度：300px； 文本对齐：居中； 利润率：5px0px； } 标题1 l1 l2 l3 l4 标题2 l5 l6 l7 l8 修改ul css如下：

#mainContainer > ul {
    column-count:auto;
    -webkit-column-count:auto;
    -moz-column-cont:auto;
    column-width:300px;
    -webkit-column-width:300px;
    -moz-column-width:300px;
    background:yellow;
    white-space:normal; //added
    width:100%;//added
}

---

演示：

这个替代品怎么样，没有列数

* { 保证金：0； 填充：0； 列表样式：无； 框大小：边框框； } main>li{ 显示：内联块； 垂直对齐：顶部； 最小宽度：300px； } 主氢{ 字号：1em； 边框底部：1px纯黑； } main>li>ul{ 宽度：100%； } 李大伟{ 显示：内联块； 宽度：47%； 利润率：1%； 边框：1px纯黑； 边界半径：5px； 填充物：5px； 文本对齐：居中； } 标题1 l1 l2 l3 l4 标题2 l5 l6 l7 l8

---

演示代码成功运行

css

html

---

如果我想把李分成几列呢？每列包含3个li元素，如图所示。我希望每列只包含3个li元素。我不明白，在你写的问题中，我希望将列表元素按图所示的适当列进行划分。我的代码给出了图。。。那么应该更改什么？每个标题标题1和标题2下显示的li元素应为每列3个。如图1所示，每个标题下的第1列包含3个li元素，之后当我添加新li时，它从新列开始。在您的代码中，当我添加新的li元素时，它将添加在底部，但仅显示在2列下。

    .mainContainer-for-features{position:absolute; top:0px; left:0px; right:0px; bottom:0px; background:#000;}
    .mainContainer-for-features header{position:fixed; top:0px; left:0px; right:0px; width:100%; height:45px; padding-top:15px; text-align:center; background:rgba(0,0,0,0.8); color:#fff;}
    #content-display { position:absolute; top:60px; left:0px; right:0px; bottom:0px; background:#fff; white-space:nowrap; overflow:hidden; overflow-x:auto; padding-left:15px;}
    .cols{display:inline-block;}
    .blocks{width:400px; height:150px; background:blue; margin:3px;}

    <div class="mainContainer-for-features" id="ebooks-mainContainer">
        <header>Simple CSS Grid</header>
        <div id="content-display">
            <div style="display:inline-block; background:#fff; padding:10px;">
                <h1>Title 1</h1><hr/>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
            </div>
            <div style="display:inline-block; background:#fff; padding:10px;">
                <h1>Title 2</h1><hr/>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
                <div class="cols">
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                    <div class="blocks"></div>
                </div>
            </div>
        </div>
    </div>