CSS菜单栏ul li

Question

大家好我正在尝试学习css ul和li菜单吧。我正在尝试创建这个设计http://s13.postimg.org/5bz1a4kw7/divider.jpg每个菜单栏都有空格和分隔符，我似乎无法得到间距，我试着调整它，但我无法控制如何每个菜单栏（li）有这个间距。你能帮我找到正确的方向吗？感谢

这是我到目前为止所做的 http://jsfiddle.net/blackknights/Wbfjg/

<ul id="mcolor">
    <li><a href="default.asp"><font color="#000000"> Home </a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>   

Answer 1

我已更新您的代码。

li a{
   display:block;
   padding:5px 10px;
   background:#ccc;
   border-right:1px solid #fff;
}
li a.last{
   border-right:none; 
}

检查jsfiddle

Answer 2

试试这个Fiddle。基本上，对padding-left元素使用padding-right和min-width以及li。