请看看这个 fiddle http://jsfiddle.net/EWUTX/
这些是使用的样式:
.box { position: relative; display:inline-block;}
.box:after {
position: absolute;
width: 100%;
height: 10px;
background: green;
content: '';
bottom:-10px;
left:0;
}
在 li 元素上使用样式时,我得到一个小的 5px 间隙,但在 div 标签上没有。
如果我指定 font-size: 0px
,间隙就会消失。但是 li
中的所有文本都消失了。
随着 li
字体大小的增加,差距变大了。
有没有一种风格可以消除这种差距,而无需对字体大小进行任何硬编码?
再次摆弄:http://jsfiddle.net/EWUTX/
谢谢
PS:我实际上是在内部构建一个 CSS 框架,用户可以在其中指定状态(使用类),例如“started
”、“not-started
”等.
使用时,该元素应在下方显示一个不同颜色的小条。用户可以在任何元素上使用此类。
最佳答案
那个间隙是行高保留字符的一部分,比如'p'字母。 如果您不为您的 div 设置高度,您将获得相同的差距。如果你想从像 img 这样的内联元素中删除它,你可以将垂直对齐设置为底部:
.box img {
vertical-align: bottom;
}
关于html - 修复使用 :after 时出现在 LI 元素上的间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18360256/