我有这个结构:
<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/
答案 0 :(得分:7)
您需要的只是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;
}
jsFiddle上的演示
希望它有所帮助!
答案 1 :(得分:1)
在你的css中使用line-height你可以减少行之间的差距
答案 2 :(得分:1)
设置每个元素的line-height
样式,例如
.gBigMonthShort { line-height: 10px; }
答案 3 :(得分:1)
答案 4 :(得分:1)
需要设置2个行高,一个在容器中,一个用于每个跨度。
* 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;
line-height:4px;
}
/* In the big day box, the month at top */
.gBigMonthShort{
text-transform:uppercase;
font-size:11px;
line-height:13px;
}
.gBigYearShort{
font-size:11px;
line-height:9px;
}
.gBigDayShort{
font-size:16px;
line-height: 13px;
}
答案 5 :(得分:1)
制作<span>
块级别,并删除换行符: