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元素。为了使导航栏看起来“更高”，您需要同时设置height元素本身的ul以及子li。下面提供了一个快速演示。

我已经给出了ul元素100px的高度，尽管这个值可以根据您的喜好进行更改。请注意，您可能还希望更改line-height元素的a属性以适应此情况。

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 2

我用什么来改变按钮本身的大小？

添加更多填充！看看吧。

＆＃13;

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

＆＃13;

<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>

＆＃13;

有很多方法可以增加链接的大小。这只是一种方式。 jbutler的答案也是一个好方法。这取决于你想要它做什么。

希望这会有所帮助。

Answer 3

如果您尝试将文本本身放大，可以使用font-size属性。

如何更改导航栏的大小

3 个答案: