0

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

4

3 回答 3

3

我建议：

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

JS 小提琴演示。

参考：

于 2013-10-21T16:21:39.547 回答
0

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

a {
    font-size:12px;
    line-height: 12px;
}
于 2013-10-21T16:26:09.070 回答
0

使用margin-bottom：

jsFiddle

li{
   margin-bottom:3px;
}
于 2013-10-21T16:26:32.100 回答