html - 为什么这 4 里不挨着站着

Question

我的#slides 是 800 像素，每里是 200 像素宽，那么为什么 4 里放不下一行？

jsFiddle

<div class="carousel-container">
    <div class="slides">
        <ul>
            <li>
                <div>some html</div>
            </li>
            <li>
                <div>some html</div>
            </li>
            <li>
                <div>some html</div>
            </li>
            <li>
                <div>some html</div>
            </li>
        </ul>
    </div>
</div>

Answer 1

我不能说我知道答案但正在改变

display: inline-block;

到

float:left;

将实现预期的结果 ( fiddle )

更新

正如 CBro 所说(如果他发布答案，他应该得到充分的信任)，压缩 </li> 之间的空格和 <li> ( fiddle 2 )