lignes d'espace CSS entre les portées

I ont cette structure:lignes d'espace CSS entre les portées

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

Les écarts entre les lignes de texte sont trop gros, je dois les raccourcies de sorte qu'ils sont tous pratiquement toucher.

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

Je ne peux pas le positionnement relatif des portées, car il y a un bogue dans Chrome qui scintille l'effet mouseover, pur CSS est la seule chose qui semble fonctionner.

Fiddle par exemple: http://jsfiddle.net/GmKsv/

Source

2010-12-01 Tom Gullen

éléments en ligne sont une douleur. C'est tellement plus facile si vous [faites vos travées de niveau bloc] (http://jsfiddle.net/GmKsv/12/) – Eric

Tout ce dont vous avez besoin est la hauteur de ligne dans votre css. Ajoutez ceci à votre gBigPage.

Voici le code:

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

Démo jsFiddle

it helps!

Source

2010-12-01 17:12:03 ryryan

Merci, mais les deux écarts entre les lignes ne sont pas compatibles –

Les lacunes en haut et en bas? – ryryan

Ok, qu'en est-il de ça? http://jsfiddle.net/hart1994/GmKsv/15/ – ryryan

Utiliser la ligne de hauteur dans votre css :) vous pouvez réduire l'écart entre les lignes

Source

2010-12-01 16:57:38 benhowdle89

J'ai essayé la hauteur de la ligne, mais chaque travée a besoin de la sienne, quand je mets une hauteur de ligne pour un span il ne fait pas beaucoup! –

Set, par exemple le style line-height de chaque élément

.gBigMonthShort { line-height: 10px; }

Source

2010-12-01 16:59:49 Emmett

Cela ne fonctionne pas, je peux définir la hauteur de ligne pour l'ensemble div, mais j'ai besoin d'eux différent –

Ah résolu, ligne-hauteur en contenant div fait la hauteur BR essentiellement, alors je peux ligne de hauteur des éléments individuels –

@Tom Que voulez-vous dire? Chaque span a déjà un nom de classe unique, donc ne pouvez-vous pas styler chacun d'eux de façon unique? – Emmett

Tom, avez-vous essayé d'utiliser la hauteur de ligne CSS? link text

Source

2010-12-01 17:00:53 Jason

Vous devez définir 2 niveaux de hauteur de ligne, un dans le conteneur et un pour chaque travée.

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

Source

2010-12-01 17:03:03

cela a fonctionné pour moi :-) – paul

Faire bloc-niveau de l'<span> et éliminer les sauts de ligne:

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

Source

2010-12-01 17:15:42 Eric

Répondre

Questions connexes