CSS使水平列表内容填充高度

Question

http://jsfiddle.net/K4ZGg/ 更新这是正确的jsfiddle链接

到目前为止,我的JsFiddle有我的尝试.我真的想让菜单中的项目填充菜单的高度,并在其列表项中居中.

请帮忙.(我为这个问题的简单而道歉,我保证我已经试图解决这个问题了一段时间)

HTML

<header id="navmenu">
    <ul>
        <li>
            <label>Welcome <span id="firstName"></span></label>
        </li>
        <li>
            <a href="#" onclick="return false;">Option One</a>
        </li>
        <li>
            <a href="#" onclick="return false;">Option Two</a>
        </li>
    </ul>
</header>

裸CSS(Full是在JsFiddle链接上)

#navmenu {
    background-color: rgba(250, 250, 210, 1);
    text-align:right;
    height:42px;
    width:100%
}
#navmenu ul {
    height:42px;
}
#navmenu ul li {
    display:inline;
    padding: 0 8px;
    height: 100%;
    border-right: solid 1px black;
}
#navmenu ul li:last-child {
    border-right: 0;
}

Answer 1

线高是可行的方法.只需将列表项行高设置为容器的相同高度(本例中为ul)

#navmenu ul li {
display:inline;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

如果你想让黑色线条到达ul的边框,只需将列表项设置为内联块:

#navmenu ul li {
display:inline-block;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

在这里小提琴:http://jsfiddle.net/gleezer/K4ZGg/1/

编辑:由于OP要求链接可以在整个高度上选择:

#navmenu ul li a{
   line-height: 42px;
   display: inline-block;
}

我们需要使整个锚点跨越列表项的整个高度.与上面相同的技巧:线高度跨越整个高度.

在这里小提琴:http://jsfiddle.net/gleezer/K4ZGg/5/