如何更改导航栏的大小

时间:2016-04-05 16:02:59

标签: html css

我看过的所有问题都是指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>

3 个答案:

答案 0 :(得分:1)

请注意我添加了背景以显示导航栏,并且在制作中不需要

您可以在代码中使用ulli元素。为了使导航栏看起来“更高”,您需要同时设置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>

答案 1 :(得分:1)

  

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

添加更多填充!看看吧。

&#13;
&#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;
&#13;
&#13;

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

希望这会有所帮助。

答案 2 :(得分:-1)

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