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/

Answer 2

folio ul li { margin: 0 20px 20px 0; }应该做到这一点。另外，如果我错了，请更正我，但使用display: inline-block;时，您是否还要添加vertical-align: top;来对齐这些框？

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

2 个答案: