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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:36:07  来源:igfitidea点击:

How can I specify distance between list items?

htmlcss

提问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.

See:http://jsfiddle.net/Brnsg/3/

见:http : //jsfiddle.net/Brnsg/3/

回答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;以对齐框吗?