跨段之间的CSS空间行 [英] CSS space lines between spans
本文介绍了跨段之间的CSS空间行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这种结构:
<div class="gBigPage">
<span class="gBigMonthShort">FEB</span><br />
<span class="gBigDayShort">23</span><br />
<span class="gBigYearShort">2011</span>
</div>
文本行之间的间隙太大,我需要缩短它们,
The gaps between the text lines are too big, I need them shortened so they are all virtually touching.
/* Mouseover div for day numbers */
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
}
.gBigPage:hover{
cursor:pointer;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
}
.gBigYearShort{
font-size:11px;
}
.gBigDayShort{
font-size:16px;
}
我不能对跨度进行相对定位,
I can't do relative positioning for the spans, as there is a bug in Chrome which flickers the mouseover effect, pure CSS is the only thing that seems to work.
小提示例如:
http://jsfiddle.net/GmKsv/
推荐答案
所有你需要的是线高在你的CSS。将此添加到您的 gBigPage
。
All you need is line-hight in your css. Add this to your gBigPage
.
以下是代码:
.gBigPage{
height:45px;
width:30px;
font-family:Arial;
font-weight:bold;
background-color:#ffee99;
text-align:center;
border-top:1px solid #c0c0c0;
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
position:absolute;
z-index:3;
line-height: 13px;
}
希望它有帮助!
这篇关于跨段之间的CSS空间行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文