CSS line-height funktioniert nicht

Habe ich in diesem div-Element, das ich bin versucht, line-height, wie so...

.social {
    background-color: #FFFFFF;
    float: left;
    font-size: 18px;
    height: 93px;
    line-height: 60px;
    padding-left: 20px;
    width: 190px;
}

aber die .social Klasse nicht mehr nach unten, was innerhalb des div-bleibt an der Spitze...hier ist der html..

<div class="social">
     <ul>
          <li class="facebook">
               <a href="http://www.facebook.com/SurfTheCurve" target="_blank"></a>
          </li>
          <li class="twitter">
               <a href="https://twitter.com/SurfCurveTutor" target="_blank"></a>
          </li>
          <li class="email">
               <a href="mailto:[email protected]?subject=Website Enquiry" target="_blank"></a>
          </li>
     </ul>
</div>

Hier ist einige andere CSS -

.social ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}

.social li {
    float: left;
}

.social ul .facebook a {
    background-image: url("images/facebook.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    text-decoration: none;
    width: 35px;
}

.social ul .twitter a {
    background-image: url("images/twitter.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

.social ul .email a {
    background-image: url("images/email.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

Hoffe, das hilft

Warum sollte es nach unten gehen?
Was meinst du mit "[go]"? Sie sind schwimmende LI. Sie kann sich selbst in ein paar DIV-clearing-Problem dort... Aber bitte besser erklären, was Sie versuchen zu erreichen.

InformationsquelleAutor user1269625 | 2012-09-30

  1. 4

    line-height erfordert text (sonst gibt ' s keine Linie!) aber die HTML-Sie haben keinen text, es ist alles nur leere <a> Elemente.

    Machte ich ein jsFiddle hier: http://jsfiddle.net/7vcmC/ (ich hatte um die Farbe zu ändern-Einstellungen), aber ich denke, das ist der Effekt, den Sie sind, nach?

    Sie können nicht definitiv sagen, dass die Nutzer nicht möchten, dass links öffnen in neuen tabs. Ich es sehr begrüßen, wenn links innerhalb von gmail gar nicht bewegen mich Weg von gmail. Ich denke, es hängt von der Anwendung.
    Ich füge line-height für input Tasten, aber es nicht anwenden, auf die es in FF. Warum ist das so?
    Das hat mir geholfen. Die Antwort, die ich brauchte: Legen Sie die line-height auf die "a" - tag, wenn Sie möchten, dass der link die Höhe geändert. Zumindest bei mir (Firefox) nur das styling der div-container hat keinen Einfluss auf den link.
    Downvote für schlechte Beratung bezüglich target="_blank"

    InformationsquelleAutor Dai

Schreibe einen Kommentar