在同一行中对齐两个li

Question

我正在尝试将li项与上一个li对齐。例如，第四li和第五li在显示块上。两者的宽度均为75％，第六种的宽度为25％。如何将这六个与第四个对齐？

发生了什么 。

我想要的。

    #container .default li { float: left;display:inline;} 
    #container .default li:nth-child(7n+1) { background:red; width:50%; height: 100px; }
    #container .default li:nth-child(4n+2),#container .default li:nth-child(6n+3),
    #container .default li:nth-child(7) { background:blue;width:25%; height: 100px; } 
    #container .default li:nth-child(8n+4),
    #container .default li:nth-child(6n+5){width:75%; background:green; height: 50px; }
    

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

Answer 1

浮动项目不能比同一行上的先前浮动项目“更高”。

只需不要浮动商品编号6：

#container .default li:nth-child(6) { float:none; display:inline-block; }

http://jsfiddle.net/0vy4x1uh/7/