3

我有这个结构：

<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/

4

6 回答 6

7

您需要的只是 CSS 中的 line-hight。将此添加到您的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上的演示

希望能帮助到你！

于 2010-12-01T17:12:03.170 回答
1

在你的 css 中使用 line-height :) 你可以减少行之间的差距

于 2010-12-01T16:57:38.683 回答
1

设置每个元素的line-height样式，例如

.gBigMonthShort { line-height: 10px; }
于 2010-12-01T16:59:49.267 回答
1

汤姆，你试过使用 CSS 行高吗？ 链接文本

于 2010-12-01T17:00:53.573 回答
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;
}
于 2010-12-01T17:03:03.330 回答
1

使<span>s 块级，并删除换行符：

http://jsfiddle.net/GmKsv/12/

于 2010-12-01T17:15:42.137 回答