Vertical align bottom UL-innen DIV

Ich habe eine div mit height:40px; und ein ul mit line-height:28px;. Ich möchte das ul nach unten, innerhalb der div. Ich habe versucht vertical-align:bottom;, aber es hilft nicht.

Meine andere Idee ist, den oberen Rand, aber wenn es ist möglich, mit vertical-align, die ich wählen werde.

Mein demo: http://jsfiddle.net/YpEd7/

jsfiddle.net/25VV5/1 das wird nicht funktionieren?
margin:12px 0 0 0; Würde das nicht so gut funktionieren?

InformationsquelleAutor user1452062 | 2014-05-28

  1. 2

    Zeile hinzufügen Höhe auf den container. Sobald Sie haben die line-height von 40px auf die container, die vertikale Ausrichtung unten, richtet es auf den Boden, da Ihr container ist auch 40px hoch. Es war nicht vor der Arbeit, da die line-height des Containers war kleiner als 40px so die ul Tat richten Sie die Unterseite der Standard line-height

    http://jsfiddle.net/YpEd7/2/

    #container {
    background:gray;
    height:40px;
    line-height: 40px;
}

    InformationsquelleAutor Huangism

  2. 1

    Die gleichen, die ich geschrieben im Kommentar oben^

    #container {
    background:gray;
    height:40px;
    position: relative;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 0px;
}

    http://jsfiddle.net/25VV5/2/

    InformationsquelleAutor Prashank

  3. 0

    Müssen Sie mischen, vertical-align, line-height haben, um diese passieren: DEMO

    #container {
    background:gray;
    height:40px;
    line-height:40px;/* equal to height of container */
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:bottom;/* fine since i'm inline-block */
    display:inline-block;
    line-height:1em;
}

ul li {
    line-height:28px;
    background:red;
    color:#fff;
    margin:0 20px 0 0;
    float:left;
}
    Warum der line-height:1em ist erforderlich für ul?
    Beachten Sie , dass defaut-Wert für vertical-align ist baseline, so dass, wenn Sie es zu entfernen , Ihre li stand in der Mitte von 40px Höhe
    zurücksetzen line-height inside li sonst, es wird 40px auch 🙂
    ich nahm Sie heraus, und es getestet. Funktioniert einwandfrei.

    InformationsquelleAutor G-Cyr

  4. -1

    Bitte aufhören zu verewigen, die line-height hack für die vertikale Ausrichtung. Die vertikale Ausrichtung funktioniert nur, wenn es ein Geschwisterchen zu verweisen.

    Wenn Sie nur ein element, das Sie möchten, vertikal ausgerichtet, müssen Sie zuerst wickeln Sie es in ein element mit einer definierten Höhe ( % ). Dann legen Sie die folgende Klasse auf den container-element.

    CSS

    .VAlignHelper:after {
    content:'';
    font-size:0;
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

    HTML

    <div id="container" class="VAlignHelper">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>

    Demo

    http://jsfiddle.net/jmdrury/YpEd7/3/

    vertical-align + line-height text-und inline-Boxen funktionieren, es ist, was es bestimmt ist, verschieben Sie ein element aus seiner' base-line in den text oder unter den anderen inline-Boxen.Es setzt die min-Höhe zu, um das element, wenn keine set in CSS. spielen kann man mit diesem codepen.io/gc-nomade/pen/rmxpo, um herauszufinden, Interaktion mit Elementen und baseline - /line-height 😉
    Line-height ist absolut nicht ausgelegt für das ausrichten von Elementen. Es wurde entwickelt, um die Fähigkeit zum ändern der Abstände zwischen Linien-box-Elemente, wie Sie 'p'. Zum Beispiel, indem Sie einen block von text, doppelter Zeilenabstand. Sie können dies überprüfen, indem überprüfen der Spezifikationen online auf Mozilla oder W3.
    Dies ist, was es ist über Sie hier eine inline-box nach unten. ....... hier haben wir ein element und eine line/inline-box. ..... Dass Sie eine line-height, oder nicht, groß element stretch es. Dies ist, was deine pseudo-element ist zu tun, dehnen Sie die Linie-Höhe bis zu 40px, aber nur auf der Linie steht. jsfiddle.net/YpEd7/4 meine Antwort nicht verwenden pseudo, weil Sie & weil ich gerufen wurde die master of pseudo-Elemente in einer weiteren Frage (benutze ich Sie zu viel ? 🙂 ). Ich dachte nützlich, daran zu erinnern, wie line-height funktioniert und was es beinhaltet.

    InformationsquelleAutor Justin Drury

Schreibe einen Kommentar