我正在通过制作一个网站来练习我的 HTML,我正在制作一个带有按钮的标题。 我试图使按钮达到标题的整个高度,但由于某种原因它超出了标题,并且没有到达顶部。
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
<a href="index.html">Home</a>
</div>
</div>
最佳答案
您可以在需要时重置 inline-block
元素上的 vertical-align
(默认为基线) 值。这里 vertical-align:top;
会很好:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
<a href="index.html">Home</a>
</div>
</div>
对于覆盖 div 的 a
,您还可以使用高度或最终使用行高:
#header {
background-color: #1564B3;
color: #fff;
height: 70px;
position: fixed;
width: 100%;
top: 0%;
left: 0%;
}
#header-a {
width: 100px;
background-color: #555555;
display: inline-block;
text-align: center;
margin-top: 0px;
height: 100%;
vertical-align:top;
}
#header-a a {
display:block;
line-height:70px;/* will size it up to 70px height for each line */
}
#header-h {
display: inline-block;
margin-top: 20px;
}
<div id="header">
<h2 id="header-h">Header text</h2>
<div id="header-a">
<a href="index.html">Home</a>
</div>
</div>
关于html - 我在制作按钮时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40490819/