html - 如何更改导航栏的大小

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

^{请注意我已经添加了背景以显示导航栏，并且在生产中不需要}

您可以在代码中使用 ul 和 li 元素。为了使导航栏显得“更高”，您需要设置 ul 元素本身的 height 以及子元素 li。下面提供了一个快速演示。

我已将 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>