作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想让#menu a
标签占据其父元素高度的100%。父元素构成水平列表的一部分,因此设置了 display: inline-block
。
然而,a
标签并没有扩展父 div 的整个高度,尽管我将其设置为 display: block;高度:100%;
.
请参见此处:https://jsfiddle.net/wqec16we/12/
有人知道这是否可以做到吗?
#wrapper {
width: 100%;
border: 1px solid #ccc;
overflow: auto;
text-align: right;
}
#hi, #menu {
display: inline-block;
height: auto;
}
#hi {
font-size: 28px;
}
#menu {
height: 100%;
width: 60px;
}
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
}
最佳答案
您可以添加带有值的行高属性,例如,
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
line-height:40px; /*MODIFICATION*/
}
#wrapper {
width: 100%;
border: 1px solid #ccc;
overflow: auto;
text-align: right;
}
#hi, #menu {
display: inline-block;
height: auto;
}
#hi {
font-size: 28px;
}
#menu {
height: 100%;
width: 60px;
}
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
line-height:40px; /*MODIFICATION*/
}
<div id="wrapper">
<div id="hi">
HI
</div>
<div id="menu">
<a href="#">Menu</a>
</div>
</div>
关于html - 使 <a> 标记采用内联 block 父级的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40755950/
我是一名优秀的程序员,十分优秀!