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

請查看demo。