如何指定列表项之间的距离？

Question

我想在每个列表之间设置20px的距离.

HTML:

<div id="folio">
    <ul>
        <li><img src=""></li>
        <li><img src=""></li>
    </ul>
</div>

CSS:

#folio { width:1200px; }
#folio ul li { width:588px; height:273px; display:inline-block; background:#cf5b6f; border:1px solid #8e1028; list-style:none; }

我怎样才能做到这一点？

Answer 1

正如@Paul所说,你应该补充:

#folio ul li{ margin:0 20px 20px 0; vertical-align:top}

由于使用display: inline-block,您还应该删除HTML中的空格,如下所示:

<div id="folio">
    <ul>
        <li><img src=""></li><li><img src=""></li><li><img src=""></li><li><img src=""></li>
    </ul>
</div>

我还添加了另一个width,然后overflow: hidden以#folio掩盖多余的margin.

请参阅: http ://jsfiddle.net/Brnsg/3/