Wie kann ich die Positionierung der LI-Elemente auf der Unterseite der UL-Liste

Ich habe Menüpunkte wie: Row1 Row2.. RowN und ich will nicht, dass breit - das ist der Grund, warum inklusive Pausen (mit max-width)

Habe ich diese HTML:

<div>
 <ul>
  <li>Row1</li>
  <li>Row1 Row2 Row3</li>
  <li>Row1</li>
  <li>Row1 Row 2</li>
 </ul>
</div>

mit diesem CSS:

/* MENU */

.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}

ul.menu
{                 
    list-style-type: none;
    min-width: 1050px;
    position: relative;
    left:10px;
    display: block;
    height: 45px;       
    margin: 0;
    padding: 0;
}

ul.menu li
{    
    float: left;
    margin: 0;
    padding: 0;
}

ul.menu li a
{    
    float: left;    
    text-decoration: none;
    padding: 9px 12px 0;
    font-weight: bold;
    max-width:130px;
}

Aktuell:

+--------------------+
|Row1 Row1 Row1 Row1 |
|     Row2      Row2 |
|     Row3           |
+--------------------+

Was ich brauche:

+--------------------+
|     Row1           |
|     Row2      Row1 |
|Row1 Row3 Row1 Row2 |
+--------------------+
  • Dies kann oder kann nicht die Frage sein, besser geeignet für Doctype.com.
  • Wie kann ich die Migration auf das andere forum?
  • Die folgende Frage befasst sich mit Fragen der Migration, aber es scheint, Sie können es selbst tun, sofort. meta.stackexchange.com/questions/10249/...
InformationsquelleAutor PaN1C_Showt1Me | 2010-12-22
  1. 4

    Verwenden display: inline-block statt float:

    ul.menu
{                 
   vertical-align: bottom;
}

ul.menu li
{    
   display: inline-block;
   text-align: center;
}

    EDIT: Hinzugefügt text-align: center;. Wenn ich verstehe deinen Kommentar richtig, das ist, was Sie wollen. Wenn nicht, werden Sie brauchen, um genauer zu sein.

    • Ich habe dieses problem noch: Wenn der Menüpunkt ist Word & LongWord, der zweite wird Links ausgerichtet (LongWord) und ich muss Sie beide zentriert..
    • allerdings inline-block funktioniert nicht in IE8
    InformationsquelleAutor RoToRa
  2. 0

    http://css-tricks.com/what-is-vertical-align/
    Dieser link könnte helfen, alternativ könnt Ihr das Ergebnis als Tabelle basierten Inhalten mit dem content-ausgerichtet auf den Boden jeder Zelle.

    InformationsquelleAutor user466764
  3. 0

    Unter der Annahme, dass folgende ist Ihre html -

    <div>
    <ul>
        <li><a>Row1</a></li>
        <li><a>Row1 Row2 Row3</a></li>
        <li><a>Row1</a></li>
        <li><a>Row1 Row 2</a></li>
    </ul>
</div>

    Können Sie einfach die style-CSS wie folgt 

    li {
    position:relative;
    float:left;       
}

li a {
    position:absolute;
    bottom:0;
}

    Obige code sollte funktionieren in allen Browsern (ich habe nicht getestet in allen Browsern)

    InformationsquelleAutor Asif Hussain
Schreibe einen Kommentar