如何在这些列表元素之间创建间距？ [复制]答案

【问题标题】：How do I create spacing between these list elements? [duplicate]如何在这些列表元素之间创建间距？ [复制]
【发布时间】：2013-10-22 00:29:04
【问题描述】：

我只是想知道如何在以下 html 中的不同列表项之间放置一个 3 像素的空间？另外，如何正确垂直对齐这些列表中的文本？

CSS：

body {
    background-color: #4a4a4a;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li {
    float: left;
}
a:link, a:visited {
    display: inline-block;
    vertical-align: middle;
    width: 318px;
    font-size: 12pt;
    font-weight: bold;
    font-family: helvetica, arial;
    letter-spacing: 4px;
    vertical-align: middle;
    color: #4a4a4a;
    background-color: #f99400;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
a:hover, a:active {
    background-color: #fbc486;
}

HTML：

<ul>
<li><a href="#news">About</a></li>
<li><a href="#contact">Portfolio</a></li>
<li><a href="#about">Contact</a></li>
</ul>

所以是的，我只想在这 3 个项目之间放置一个 3 像素的空白空间（与背景颜色相同），以便在导航栏中将它们分开。由于某种原因，文本的垂直对齐方式无法正常工作。

【问题讨论】：

如果你想水平分隔它们，你可以使用填充。如果你想垂直分隔它们，你可以使用 line-height。
可能在这里遗漏了一些东西，但你不只是需要 li { float:left;边距右：3px； }

标签： html css

【解决方案1】：

我建议：

li + li {
    margin-left: 3px;
}

JS Fiddle demo.

参考资料：

CSS adjacent-sibling (+) combinator。

【讨论】：

非常感谢，回复也这么快。真的很感激！
确实不客气，我很高兴能帮上忙。 :D

【解决方案2】：

如果您希望文本在 a 标签内正确对齐，请使用与字体大小相同的行高。例如：

a {
    font-size:12px;
    line-height: 12px;
}

【讨论】：

【解决方案3】：

使用margin-bottom:

jsFiddle

li{
   margin-bottom:3px;
}

【讨论】：