我在 HTML 中定义了一个导航栏和一个按钮,如下所示:
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button"><p style="font-family:courier;">drop dead</p></button>
</div>
上面的 CSS 是这样的:
.topnav {
background-color: #F9FAFA;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button {
background-color: #F9FAFA;
border: 2px solid #BA55D3;
border-radius: 5%;
color: #BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
}
现在,我能做的最好的事情就是让按钮正好适合导航栏。我希望它比导航栏小,就像 stackoverflow 导航栏中的注册按钮一样。
当我设置按钮的高度时,按钮内的文本会超出边框,当我尝试填充时,按钮会变大。 有什么帮助吗?
最佳答案
删除 <p>
按钮内的标记,这就是导致意外边距的原因。另外,我添加了 display: flex
居中对齐导航中的元素:
.topnav {
background-color:#F9FAFA ;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
overflow: hidden;
display: flex;
align-items: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #BA55D3 ;
text-align: center;
padding: 8px 5px;
text-decoration: none;
font-size: 3vw;
}
.button{
background-color: #F9FAFA ;
border:2px solid #BA55D3;
border-radius: 5%;
color:#BA55D3;
text-align: center;
margin-left: 70%;
display: inline-block;
font-family: courier;
font-size: 1vw;
}
<div class="topnav">
<a class="active" href="#home">Hooligans</a>
<button class="button" >drop dead</button>
</div>
关于html - 根据 navbar html 调整按钮的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49562651/