如何更改導航欄的大小

Question

我看過的所有問題都是指WordPress或Bootstrap（這是什麼？）導航欄，我用CSS創建了我的導航欄。

我想讓導航欄變大一些，這樣移動用戶就可以更輕鬆地點擊正確的鏈接。我嘗試過使用height: px;，但所做的只是將文本向下推。

我該如何改變按鈕本身的大小？下面包括我的CSS。

html{background:gray;} 
 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    margin: 0 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

Answer 1

如果你想使文字本身較大，你可以使用font-size屬性。

Answer 2

^{請注意，我已經爲了顯示導航欄添加背景，並在生產}

不要求你是確定你的代碼中使用ul和li元素。爲了使導航欄顯示爲「更高」，您需要設置ul元素本身以及子li的height。下面提供了一個快速演示。

我給出了ul元素100px的高度，雖然此值可以更改爲您的偏好。請注意，您可能還需要更改a元素的line-height屬性以適應此操作。

html,body { 
 
    background: gray; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    text-align: center; 
 
    display: block; 
 
    list-style-type: none; 
 
    background: dimgray; 
 
    height: 100px;  /*   <-- change this line*/ 
 
} 
 
li { 
 
    display: inline-block; 
 
    height: 100%; 
 
} 
 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    background: lightgray; 
 
    line-height: 100px; /*   <-- change this line*/ 
 
    text-align: center; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    text-decoration: none; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

Answer 3

我應該使用什麼來改變按鈕本身的大小？

添加更多填充！看一看。

body {background-color: gray;} 
 

 
ul { 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 2em; /* bigger button? add more padding! */ 
 
    text-decoration: none; 
 
    margin: 0 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="/AboutUs.html">About</a> 
 
    </li> 
 
    <li><a href="/ContactUs.html">Contact</a> 
 
    </li> 
 

 
</ul>

有多種方式，增加鏈接的大小。這只是一種方式。 jbutler的回答也是一個好方法。這取決於你想要做什麼。

希望這會有所幫助。