内联块<div>向下推到父级之外，尽管身高却比父级高：
用户名
问题
- 该
.nav-item<div>■找比他们的父母更大的高度-尽管height: inherit;。 - 该
.nav-item<div>尽管缺乏任何保证金或填充s的下推他们的父母之外，。
的HTML
<div id="nav">
<h1>A website</h1>
<div class="nav-item">
<p>Item 1</p>
</div>
<div class="nav-item">
<p>Item 2</p>
</div>
<div class="nav-item">
<p>Item 3</p>
</div>
</div>
的CSS
#nav {
height: 75px;
left: 0;
right: 0;
top: 0;
margin: auto;
position: fixed;
background-image: url('img/gradient.png');
padding: 0;
}
#nav h1 {
top: 8px;
margin-left: 15px;
margin-right: 15px;
position: relative;
font-size: 42px;
font-family: 'Francois One', Impact, Futura, sans-serif;
color: rgb(255,255,255);
display: inline;
}
#nav .nav-item {
display: inline-block;
height: inherit;
padding: 10px;
margin: 0;
background: blue;
}
#nav .nav-item p {
font-family: 'Francois One', Impact, Futura, sans-serif;
margin: 0;
}
结果
Praveen Kumar Purushothaman
这里发生的事情是预期的。高度将不会被继承，是由计算出的text-alignment，padding和margin宽度。请这样做：
- 拆下
padding顶部和底部。 - 拆下
margin顶部和底部。 - 添加
vertical-align: top;到.nav-item。
解决方案
的CSS
#nav .nav-item {margin: 0; padding: 0 10px; vertical-align: top;}
预习：
小提琴：http : //jsfiddle.net/praveenscience/vnfdv9bj/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
获取内联块div以填充父级的高度
- 2
内联块div上的线高向下推其他内联块兄弟
- 3
内联块父级 - 不比孩子高？
- 4
为什么内联块将我的 div 向下推：
- 5
具有“空白：普通”的内联块div超过具有“空白：nowrap”的父级的宽度
- 6
具有“空白：普通”的内联块div超过具有“空白：nowrap”的父级的宽度
- 7
内联块div中的子元素更改了父级兄弟姐妹的位置
- 8
CSS布局使用内联块在父div中留出空隙
- 9
使内联块高度为父级的100％？
- 10
中心div内联块
- 11
为什么这些内联块div包裹，尽管它们的父目录有溢出-x：scroll？
- 12
CSS位置-内联块行中的Div向下跳转
- 13
如何防止CSS块元素影响父级内联块
- 14
如何防止CSS块元素影响父级内联块
- 15
如何使内联块父级的宽度环绕其子级？
- 16
将内联块的div居中
- 17
如何创建随父级缩小的内联 div
- 18
展开式div（点击时），内联代码块，不向下推其他div的第二行
- 19
内联块div下一个包含被下推图像的div
- 20
调整父元素大小时，使用内联块的 Div 会重叠
- 21
如何使具有nowrap的父级继承内联块的宽度
- 22
如何使内联块div中的文本完全独立于div之外的任何文本？
- 23
内联显示块级元素
- 24
向内联块div添加文本会强制其向下浮动
- 25
文本行高不能与内联块div容器一起使用
- 26
HTML内联块DIV无法排列
- 27
内联块div开始新行
- 28
内联块div的垂直对齐错误
- 29
显示：内联块覆盖我的div容器
我来说两句