html - 带边框的菜单列表显示不正确

Question

我有一个包含 5 项的菜单。这个想法是每一个之间都有一个边界。

问题是一些菜单项需要双线，但当这种情况发生时，边框到处都是。

我已经查看代码将近一个小时了，但不确定如何更正此问题。

我可以让它们单行，但这违背了设计。

JSFIDDLE:

http://jsfiddle.net/69CSf/

CSS:

body {
    background-color:black;
}
#menu {
    width:500px;
    top:100px;
    -border:solid 1px #ffff00;
    height:40px;
    vertical-align:middle;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Open Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color:#FFF;
    width:100%;
    height:40px;
}
li {
    display: inline-block;
    width:19%;
    height:40px;
    text-align:center;
    padding-top:9px;
    vertical-align:center;
}
li~li {
    border-left: 3px solid #FFFFFF
}
li>a:hover {
    color:#FFF;
}
li>a {
    color:rgb(200, 200, 200);
    text-decoration:none;
}

HTML:

<div id="menu">
    <ul>
        <li><a href="#">Philosophy</a>
        </li>
        <li><a href="#">Your Trainer</a>
        </li>
        <li><a href="#">Word of Mouth</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>

Answer 1

将 display 值从 inline-block 更改为 table-cell 并将 vertical-align 值更改为 middle(vertical-align:center 根本不存在)。

Example