如何叠加div列表，以便没有垂直间隙？

Question

如果我有一个div（可变高度）的列表（ul / li），有没有办法堆叠它们，以便div和它下面的div之间没有间隙？就像最好的UI ......

    <ul>
         <li>
           <div>...</div>
         </li>
         <li>
           <div>...</div>
         </li>
         ...
    </ul>    

    ul
    {
       list-style-type:none; 
       vertical-align:top;
    }

    li
    {
       list-style:none;    
       vertical-align:top;  
       display:inline-block;   
    }

这与How to make div stack first vertically then horizontally?中的问题类似，只是我仍然想要这样订购：

1 2 3
4 5

Answer 1

以下CSS足以创造该效果

ul, li  { margin: 0; padding: 0 }
ul li { float: left; }
ul li div { background: #f00; color: #fff; }

Demo