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 に答える