製作鏈接如圖所示

Question

我正在建立一個菜單。我有這樣的代碼：

<nav> 

     <ul> 
      <li><a href="novy2.html">Kontakt</a></li> 
      <li><a href="novy2.html">Reference</a></li> 
      <li><a href="novy2.html">Moje služby</a></li> 
      <li><a href="novy2.html">Kdo jsem</a></li> 
     </ul> 
    </nav> 

和CSS：

nav{ 
width: 100%; 
height: 90px; 
border-top: 3px solid red; 
border-bottom: 1px solid gray; 
background-color: white; 
} 


nav li{ 
float: right; 
padding: 20px 35px 0 0px; 
} 

nav ul{ 
margin-right: 100px; 
height: 90px; 
list-style-type: none; 
} 


nav a{ 
text-decoration: none; 
color: black; 
font-size: 17px; 
font-family: Montserrat; 
font-weight: 700; 
} 


nav a:hover{ 
text-align: center; 
color: 33adae; 

我所要做的就是使鏈接點擊喜歡的塊與整個導航欄的高度。我完成的方式到目前爲止，您只能點擊鏈接中的文字。

Answer 1

一般來說，所有需要的是。

nav a{ 
display:block; 
} 

然而，對於一個更全面例如它通常是更容易讓鏈接確定標題的高度。

對於居中，請勿使用浮動，請將ul設置爲text-align:center，將li設置爲display:inline-block。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    ; 
 
    box-sizing: border-box; 
 
} 
 
nav { 
 
    border-top: 3px solid red; 
 
    border-bottom: 1px solid gray; 
 
    background-color: white; 
 
    overflow: hidden; 
 
    /* clearfix */ 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
nav ul { 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 
nav a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 17px; 
 
    font-family: Montserrat; 
 
    font-weight: 700; 
 
    height: 90px; 
 
    line-height: 90px; 
 
    padding: 0 25px; 
 
} 
 
nav a:hover { 
 
    text-align: center; 
 
    color: 33adae; 
 
    background: plum;

<nav> 
 
    <ul> 
 
    <li><a href="novy2.html">Kontakt</a> 
 

 
    </li> 
 
    <li><a href="novy2.html">Reference</a> 
 

 
    </li> 
 
    <li><a href="novy2.html">Moje služby</a> 
 

 
    </li> 
 
    <li><a href="novy2.html">Kdo jsem</a> 
 

 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

你可以從你的li動手清除填充並將其添加到您的a標籤。見例如http://codepen.io/anon/pen/gaGxpb

Answer 3

移動你<li>填充到<a>孩子，並給予鏈接高度：

見codepen

注意：添加了邊界的鏈接，這樣，你看邊界。

Answer 4

將鏈接顯示爲塊display: block;並使用line-height爲它們指定所需的高度。試試這個：

nav { 
 
    width: 100%; 
 
    height: 90px; 
 
    border-top: 3px solid red; 
 
    border-bottom: 1px solid gray; 
 
    background-color: white; 
 
} 
 
nav li { 
 
    float: right; 
 
    padding: 0px 35px 0 0px; 
 
} 
 
nav ul { 
 
    margin: 0 100px 0 0; 
 
    height: 90px; 
 
    list-style-type: none; 
 
} 
 
nav a { 
 
    display: block; 
 
    line-height: 90px; 
 
    text-decoration: none; 
 
    color: black; 
 
    font-size: 17px; 
 
    font-family: Montserrat; 
 
    font-weight: 700; 
 
} 
 
nav a:hover { 
 
    text-align: center; 
 
    color: 33adae;

<nav> 
 

 
    <ul> 
 
    <li><a href="novy2.html">Kontakt</a></li> 
 
    <li><a href="novy2.html">Reference</a></li> 
 
    <li><a href="novy2.html">Moje služby</a></li> 
 
    <li><a href="novy2.html">Kdo jsem</a></li> 
 
    </ul> 
 
</nav>

Answer 5

下面是使用高度，是我的版本，並與屬性而不是填充，我使用的背景顏色，所以你可以看到如何工作：http://codepen.io/aluknot/pen/wKrqaG

HTML：

<nav> 
    <ul> 
     <li><a href="novy2.html">Kontakt</a></li> 
     <li><a href="novy2.html">Reference</a></li> 
     <li><a href="novy2.html">Moje služby</a></li> 
     <li><a href="novy2.html">Kdo jsem</a></li> 
    </ul> 
</nav> 

CSS：

nav { 
    width: 100%; 
    height: 90px; 
    border-top: 3px solid red; 
    border-bottom: 1px solid gray; 
    background-color: white; 
} 

nav li{ 
    float: right; 
    background: red; 
    text-align: center; 
    height: 100%; 
    width: 120px; 
    line-height: 90px 
} 

nav ul{ 
    margin: 0; 
    padding-right: 100px; 
    height: 90px; 
    list-style-type: none; 
    background: green; 
} 

nav a{ 
    text-decoration: none; 
    color: black; 
    font-size: 17px; 
    font-family: Montserrat; 
    font-weight: 700; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: blue; 
} 

nav a:hover { 
    background: black; 
    color: white; 
}