Css 绝对定位在:元素之前在元素上显示:表格单元格
我有一行元素,我想使用display:table cell设置它们的样式;使文本在中间垂直放置。有时一行将处于活动状态,我需要在活动元素的顶部添加一个水平条。此栏需要至少从行中删除一个像素。我为此使用了:before伪元素,它在Chrome中非常有效,但在Firefox中没有,因为它的display:table cell 有什么解决办法吗?最好是没有javascript的 在Chrome中工作,而不是在Firefox中工作:Css 绝对定位在:元素之前在元素上显示:表格单元格,css,css-position,Css,Css Position,我有一行元素,我想使用display:table cell设置它们的样式;使文本在中间垂直放置。有时一行将处于活动状态,我需要在活动元素的顶部添加一个水平条。此栏需要至少从行中删除一个像素。我为此使用了:before伪元素,它在Chrome中非常有效,但在Firefox中没有,因为它的display:table cell 有什么解决办法吗?最好是没有javascript的 在Chrome中工作,而不是在Firefox中工作: col1 col1 col1 col1 col2 col2 col2
col1 col1 col1 col1
col2 col2 col2 col2
col3 col3 col3
#包装纸{
利润率:40px0;
位置:相对位置;
背景:黄色;
显示:内联块;
}
#包装器>div{
宽度:33%;
显示:表格单元格;
垂直对齐:中间对齐;
高度:75px;
宽度:60px;
边框:1px实心#ccc;
文本对齐:居中;
位置:相对位置;
}
.col2:以前{
内容:'';
位置:绝对位置;
顶部:-7px;
高度:5px;
背景:浅蓝色;
左:-1px;
右:-1px;
z指数:50;
}
<div id="wrapper">
<div class="col1">col1 col1 col1</div>
<div class="col2">col2 col2 col2</div>
<div class="col3">col3 col3 col3</div>
</div>
#wrapper {
margin: 40px 0 0 0;
position: relative;
background: yellow;
display: inline-block;
}
#wrapper > div {
width: 33%;
display: table-cell;
vertical-align: middle;
height: 75px;
width: 60px;
border: 1px solid #ccc;
text-align: center;
position: relative;
}
.col2:before {
content: '';
position: absolute;
top: -7px;
height: 5px;
background: lightblue;
left: -1px;
right: -1px;
z-index: 50;
}