CSS Raum Linien zwischen Spannweiten

Ich habe diese Struktur:CSS Raum Linien zwischen Spannweiten

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

Die Lücken zwischen den Textzeilen sind zu groß, ich brauche sie verkürzt, so dass sie alle nahezu berühren.

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

Ich kann nicht für die Spannweiten relative Positionierung tun, da es einen Fehler in Chrome ist, die den Effekt Mouseover flackert, reine CSS ist das einzige, was zu funktionieren scheint.

Fiddle zum Beispiel: http://jsfiddle.net/GmKsv/

Quelle

2010-12-01 Tom Gullen

Inline-Elemente ein Schmerz sind. Es ist so viel einfacher, wenn Sie [machen Sie Ihre Blöcke Block-Level] (http://jsfiddle.net/GmKsv/12/) – Eric

Alles, was Sie brauchen, ist Line-Höhe in Ihrem CSS. Fügen Sie dies zu Ihrem gBigPage hinzu. Hier

ist der 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; 
}

Demo auf jsFiddle

Hoffe, es hilft!

Quelle

2010-12-01 17:12:03 ryryan

Danke, aber die zwei Lücken zwischen den Linien sind nicht einheitlich –

Die Lücken an der Spitze und am Boden? – ryryan

Ok, was ist damit? http://jsfiddle.net/hart1994/GmKsv/15/ – ryryan

Verwenden line-height in Ihrem CSS :) Sie die Lücke zwischen den Zeilen reduzieren

Quelle

2010-12-01 16:57:38 benhowdle89

Ich versuchte Zeile Höhe, aber jeder Bereich braucht es eigene, wenn ich eine Zeile Höhe für eine Spannweite es tut nicht viel! –

Sets jeden line-height Stil-Elemente, zum Beispiel

.gBigMonthShort { line-height: 10px; }

Quelle

2010-12-01 16:59:49 Emmett

Das funktioniert nicht, kann ich die Zeilenhöhe für die gesamte div einstellen, aber ich brauche sie anders –

Ah löste es, Zeilenhöhe in div enthält die BR Höhe im Wesentlichen, dann kann ich Zeilenhöhe einzelne Elemente –

@Tom Was meinen Sie? Jede Spanne hat bereits einen eindeutigen Klassennamen. Kannst du sie also nicht individuell gestalten? – Emmett

Tom, haben Sie versucht, CSS-Zeilenhöhe zu verwenden? link text

Quelle

2010-12-01 17:00:53 Jason

Sie müssen 2 Ebenen der Zeilenhöhe einstellen, eine in Container und eine für jede Spanne.

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

Quelle

2010-12-01 17:03:03

das hat für mich funktioniert :-) – paul

Stellen der <span> s auf Blockebene, und entfernen Sie die Zeilenumbrüche:

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

Quelle

2010-12-01 17:15:42 Eric

CSS Raum Linien zwischen Spannweiten

Antwort

Verwandte Themen