html - CSS 导航栏

Question

我正在玩 CSS，到目前为止我正在尝试制作一个网站。我制作了一个导航栏，它正在下降，所以它是水平的。我需要它穿过，我还需要像 1 条灰线来分隔标签。这是我到目前为止得到的。

HTML：

<div class="horizontal">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Register.html">Register</a></li>
<li><a href="Rules.html">Rules</a></li>
</ul>
</div>

CSS：

div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}

所以这又是向下的，我需要它走到一边，就像一条线将每个标签分开。

Answer 1

div.horizontal
{
width:809px;
height:63px;
position:relative;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
    margin-left:5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
display: inline;
color:#FFFFFF;
background-color:#000000;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}

工作小提琴：

http://jsfiddle.net/EpPSv/10/