li元素正在获得双边距，ul元素的大小不合适

Question

这个问题是双重打击，基本上，我有这个设置：

<section>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div></div>
    <div></div>
</section>

这是样式表：

ul{
    width: 100%;
    margin: -5px 0;
    padding: 0;
    background-color: tomato;
}

li{
    width: 200px;
    height: 100px;
    margin: 5px;
    background-color: yellowgreen;
    float: left;
    list-style: none;
}

ul:after{
    content: " ";
    height: 0;
    display: block;
    clear: both;
}

div{
    width: 100%;
    height: 100px;
    margin: 5px;
    background-color: cornflowerblue;
}

小提琴：http://jsfiddle.net/p299jd55/2/

问题在于我希望列表项假装好像<ul>不存在。我目前的版本是垂直的，但不是横向的。另外，<ul>比div小一点，因此即使它们正常，列表元素也不会与div正确排列。我希望列表元素显示为其他div（除了更小）。问题是我需要将它们保存在<ul>元素中，以便我的VM绑定库（KnockoutJS）正常工作。

有没有办法绕过这个而不引入div的包装？我想将存在的元素数量减少到最低限度。如果在没有包装div的情况下没有办法做到这一点，我对此感到满意，但我更希望它是最后的选择。

Answer 1

非常简单：

CSS更改

ul{
    width: 100%;
    margin: 0 0; /* Changed */
    padding: 0;
    background-color: tomato;
}

div{
    width: 100%;
    height: 100px;
    margin: 5px 0; /* Changed */
    background-color: cornflowerblue;
}

Fiddle illustrating the change

这里发生的是你的利润到处都是。当您要在ul中简单地覆盖它们时，无需在li上设置负边距。这就是导致你的布局不稳定的原因。

更新

根据您在评论中的反馈，以下是如何将div部分刷新到您的ul

<强> Fiddle with flush div section

基本上，我们使用您的clearfix解决方案通过将此行添加到ul:after来向上拉出以下元素：

margin-bottom: -10px;

然后添加此规则：

li:first-child {
    margin-left: 0;
}

希望有所帮助。

更新零件deux

根据您的评论

这非常简单。

只需向您的li元素和div元素添加浮点数即可。删除clearfix部分。

<强> Example fiddle