Html 如何指定列表项之间的距离？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5998899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I specify distance between list items?
提问by Muzammil
I want to set a distance of 20px between every single list.
我想在每个列表之间设置 20px 的距离。
HTML:
HTML：
<div id="folio">
<ul>
<li><img src=""></li>
<li><img src=""></li>
</ul>
</div>
CSS:
CSS：
#folio { width:1200px; }
#folio ul li { width:588px; height:273px; display:inline-block; background:#cf5b6f; border:1px solid #8e1028; list-style:none; }
How can I do this?
我怎样才能做到这一点？
回答by thirtydot
As @Paul said, you should add:
正如@Paul 所说，您应该添加：
#folio ul li{ margin:0 20px 20px 0; vertical-align:top}
Due to using display: inline-block, you should also remove the whitespace in your HTML, like this:
由于使用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>
I also added another widthand then overflow: hiddento #folioto mask the extra margin.
我还添加了另一个width然后overflow: hiddento#folio来掩盖额外的margin.
回答by paulruescher
folio ul li { margin: 0 20px 20px 0; }should do the trick. Also, correct me if I'm wrong, but with display: inline-block;, should you not also be adding vertical-align: top;to align the boxes?
folio ul li { margin: 0 20px 20px 0; }应该做的伎俩。另外，如果我错了，请纠正我，但是对于display: inline-block;，您不应该添加vertical-align: top;以对齐框吗？
