我看过的所有问题都是指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>
答案 0 :(得分: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>
答案 1 :(得分:1)
我用什么来改变按钮本身的大小?
添加更多填充!看看吧。
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的答案也是一个好方法。这取决于你想要它做什么。
希望这会有所帮助。
答案 2 :(得分:-1)
如果您尝试将文本本身放大,可以使用font-size
属性。