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 Link上）

#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;**
}

请查看demo。

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

2 个答案: