Question

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

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

我几乎一直在查看代码，不知道如何解决这个问题。

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

JSFIDDLE：

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根本不存在）。< / p>

Example

Answer 2

您拥有此vertical-align:center;，将vertical-align:middle;元素更改为LI

边框无法正确显示的菜单列表

2 个答案: