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

ラインの高さを2レベルに設定する必要があります。1つはコンテナに、もう1つはスパンごとに設定します。

* 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

CSSでline-heightを使用してください:)行間のギャップを減らすことができます

于 2010-12-01T16:57:38.683 に答える
1

各要素のline-heightスタイルを設定します。

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

トム、CSS line-height を試してみましたか? リンクテキスト

于 2010-12-01T17:00:53.573 に答える
1

s を<span>ブロック レベルにし、改行を削除します。

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

于 2010-12-01T17:15:42.137 に答える