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 width
and then overflow: hidden
to #folio
to mask the extra margin
.
我还添加了另一个width
然后overflow: hidden
to#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;
以对齐框吗?