css - 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（完整在 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/

Answer 2

请试试这个：

#navmenu {
    background-color: rgba(250, 250, 210, 1);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.8);
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
    text-align:right;
    height:42px;
    width:100%
}
#navmenu ul {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    padding: 0 12px;
    height:42px;
  float: right;
}
#navmenu ul li {
    **display:block;
    float: left;
    line-height: 42px;**

}
#navmenu ul li:first-child {
    **padding-right: 8px;**
}
#navmenu a {
    text-decoration:none;
  **border-left: solid 1px black;
  padding: 0 8px;**
}

请查看演示。