我有这样的结构:
<div class="gBigPage">
<span class="gBigMonthShort">FEB</span><br />
<span class="gBigDayShort">23</span><br />
<span class="gBigYearShort">2011</span>
</div>
文本行之间的间隙太大,我需要将它们缩短,这样它们实际上都是接触的。
/* 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;
}
我无法对跨度进行相对定位,因为 Chrome 中有一个错误会闪烁鼠标悬停效果,纯 CSS 似乎是唯一有效的方法。
小提琴例如:http://jsfiddle.net/GmKsv/ http://jsfiddle.net/GmKsv/
您所需要的只是 css 中的行高。将其添加到您的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;
}
Demo on jsFiddle http://jsfiddle.net/hart1994/GmKsv/15/
希望能帮助到你!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)