基於ul的導航中的對齊和可點擊區域

Question

我正在開發一個簡單的基於UL的水平導航。我希望可點擊區域與每個LI的高度和寬度相匹配。我已經嘗試了很多關於這個主題的變體，但是這是關於下面顯示的最快樂的折衷方案，其中每個LI中的一半區域在文本中間對齊時可點擊。感謝您的任何意見。

body { 
 
    background-color: #ffaa00; 
 
} 
 
#main { 
 
    width: 1200px; 
 
    height: 890px; 
 
    margin: 0 auto; 
 
} 
 
#content { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #000; 
 
    background-color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    margin-top: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: table-cell; 
 
    height: 50px; 
 
    width: 190px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
li:hover { 
 
    background-color: #999; 
 
    border-radius: 6px; 
 
} 
 
a { 
 
    display: inline-block; 
 
    height: 25px; 
 
    width: 190px; 
 
}

<div id="main"> 
 
    <div id="content"> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="#a">Link</a> 
 
     </li> 
 
     <li><a href="#b">Link</a> 
 
     </li> 
 
     <li><a href="#c">Link</a> 
 
     </li> 
 
     <li><a href="#d">Link</a> 
 
     </li> 
 
     <li><a href="#e">Link</a> 
 
     </li> 
 
     <li><a href="#f">Link</a> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

你必須改變height到100%和使用:before到vertical-align文本中。

body { 
 
    background-color: #ffaa00; 
 
} 
 
#main { 
 
    width: 1200px; 
 
    height: 890px; 
 
    margin: 0 auto; 
 
} 
 
#content { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #000; 
 
    background-color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav { 
 
    height: 50px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
} 
 
ul { 
 
    margin-top: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: table-cell; 
 
    height: 50px; 
 
    width: 190px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
li:hover { 
 
    background-color: #999; 
 
    border-radius: 6px; 
 
} 
 
a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 190px; 
 
} 
 
a:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<div id="main"> 
 
    <div id="content"> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="#a">Link</a> 
 
     </li> 
 
     <li><a href="#b">Link</a> 
 
     </li> 
 
     <li><a href="#c">Link</a> 
 
     </li> 
 
     <li><a href="#d">Link</a> 
 
     </li> 
 
     <li><a href="#e">Link</a> 
 
     </li> 
 
     <li><a href="#f">Link</a> 
 
     </li> 
 

 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>