CSS spazio tra linee campate

Ho questa struttura:

<div class="gBigPage">
    <span class="gBigMonthShort">FEB</span><br />
    <span class="gBigDayShort">23</span><br />
    <span class="gBigYearShort">2011</span>
</div>

Spazi tra le linee di testo sono troppo grandi, ho bisogno di loro accorciate in modo che essi sono tutti praticamente toccare.

/* 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;
}

Io non riesco a fare il posizionamento relativo per le campate, come c’è un bug in Chrome che sfarfalla l’effetto mouseover, CSS puro è l’unica cosa che sembra funzionare.

Violino per esempio:
http://jsfiddle.net/GmKsv/

Inline elementi sono un dolore. È molto più facile se si rendere il vostro si estende a livello di blocco

OriginaleL’autore Tom Gullen | 2010-12-01

6 Replies
  1. 7

    Tutto ciò che serve è la linea di altezza nel tuo css. Aggiungere questo al tuo gBigPage.

    Ecco il codice:

    .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 su jsFiddle

    Speranza che aiuta!

    Grazie, ma i due spazi tra le linee non sono coerenti
    Le lacune nella parte superiore e inferiore?
    Ok, che ne dite di questo? jsfiddle.net/hart1994/GmKsv/15

    OriginaleL’autore ryryan

  2. 1

    Usare la linea di altezza nel tuo css 🙂 è possibile ridurre il divario tra le righe

    Ho provato altezza della linea, ma ogni luce ha bisogno della sua, quando ho messo una riga di altezza per una durata non fare molto!

    OriginaleL’autore benhowdle89

  3. 1

    Set di ogni elemento line-height stile, per esempio

    .gBigMonthShort { line-height: 10px; }
    Che non funziona, è possibile impostare l’altezza della linea per l’intero div, ma ho bisogno di loro diversi
    Ah risolto, line-height in div contenente il BR altezza essenzialmente, quindi posso altezza della linea di singoli elementi
    Che cosa vuoi dire? Ogni luce ha già un nome di classe univoco, in modo che non si può stile di ognuno in modo univoco?
    Vedi la risposta sotto, l’ho fatto alla fine, ma ha richiesto 2 livelli di linea heights

    OriginaleL’autore Emmett

  4. 1

    Necessario impostare 2 livelli di altezza, in un contenitore, uno per ogni campata.

    * 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;
    }

    OriginaleL’autore Tom Gullen

Lascia un commento