如何在這些列表元素之間創建間距？

Question

我只是想知道如何將3像素的空間在以下html中的不同列表項目之間？另外，如何正確地對齊這些列表中的文本？

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 { 
    font-size:12px; 
    line-height: 12px; 
} 

Answer 3

使用margin-bottom：

jsFiddle

li{ 
    margin-bottom:3px; 
}