Question

我只是想知道如何在以下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像素的空白区域（与背景颜色相同），以便在导航栏中将它们分开。由于某种原因，文本的垂直对齐不正常。

Answer 1

我建议：

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

JS Fiddle demo

参考文献：

CSS adjacent-sibling (+) combinator。

Answer 2

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

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

Answer 3

使用margin-bottom：

jsFiddle

li{
   margin-bottom:3px;
}

如何在这些列表元素之间创建间距？

3 个答案: