Wie kann ich vertikal ausrichten von Elementen in eine ungeordnete html-Liste?

Wie kann ich vertikal ausrichten von Elementen in eine ungeordnete Liste zu arbeiten, im IE6 und 7?

Ich kann nicht einfach festlegen, line-height auf die volle Höhe, weil ich den 1-Zeilen-Elemente und 2 Zeile Elemente.

Mein code ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            ul {
                list-style: none;
                border: 1px solid black;
                height: 40px;
            }
            li {
                float: left;
                margin-right: 10px;
                height: 40px;
                width: 46px;
            }
            a {

            }
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a href="/">item1</a>
            </li>
            <li>
                <a href="/">two lines</a>
            </li>
        </ul> 
    </body>
</html>

Du meinst zu haben, dass </div>?
, ≪/div> in der li sollte es nicht. Nicht sicher, ob das die Ursache Ihrer Probleme.
ein Typ ist. entfernt

InformationsquelleAutor pablo | 2009-12-28

1

Können Sie nicht schweben die Elemente auf der linken und erwarten, dass Sie vertikal line-up....

Entfernen
```
float: left;
```
Aus der LI-Stil...

Ich brauche alle Elemente die gleiche Breite. Das ist, warum ich bin mit float anstelle von display:inline. Elemente mit zwei Worten sollten dann zwei Zeilen. Ist es möglich, dies zu erreichen, ohne schwimmen?
Ja, Sie können... müssen Sie entfernen die Breite Einschränkung für die aufgeführten Elemente legen Sie es einfach mit auto oder 100%.
mit width:auto wird alle Elemente in einer Zeile erscheinen. Ich möchte, dass alle Objekte dieselbe Breite haben. Elemente mit lang sollte der text erstreckt sich über zwei Zeilen.
Sie müssen zuerst entfernen Sie das float: left; und ersetzen mit clear: both; oder display: block; ... edit ... ich missverstanden, was genau Sie versuchten, Sie ... Zur Trennung der "Worte" durch einen "space" kann nicht getan werden dynamisch innerhalb der CSS, müssen Sie zum ausführen dieser Aktion verwenden javascript. In denen wird es explodieren Wörter, getrennt durch ein "Platz" und brechen Sie in separaten aufgeführten Elemente.
Ich glaube, das ist ein wenig Verwirrung hier, lassen Sie mich versuchen zu klären, ein paar Dinge. Sie versuchen die horizontale Anzeige aufgeführten Elemente, wobei ein Element mit "zwei oder mehr" Worte sind gebrochen senkrecht nach unten. Eine left-float und Breite ist es perfekt möglich, aber nicht empfehlenswert, denn sobald Sie anfangen, die Fliesen in dieser Liste aufgeführten Elemente, die der IE nicht spielen sehr schön mit Listen, die ungleiche Höhen und schwimmen ... können Sie entweder 1) eine Höhe groß genug für die Anzahl der Wörter, die Sie erwarten. 2) die javascript Verwenden Sie zum anpassen der Listen entsprechend.

InformationsquelleAutor nwhiting
1

wenn ich das richtig verstehe wollen Sie das float shrink-wrap li?

Wenn das ist der Fall, die Sie benötigen, um
```
li {clear:left;}
```
Also die lis sind untereinander, nicht nebeneinander. Sie können auch inline-block-wenn Sie möchten, dass die li zu shrink-wrap um die Inhalte.

Auch, je nach Ziel, könnte es sein, approproate eine Tabelle verwenden, je nachdem, was es für verwendet werden.

InformationsquelleAutor user1721135
0

Sorry, wenn dies ist nicht eine richtige Antwort, aber es kann helfen, die Sache aufzuklären:

Warum sind Sie mit Schwimmern statt display: inline für deine Liste posten?

InformationsquelleAutor Anthony
0

Den Zeilen, die im wesentlichen die gleiche Höhe aufweisen. Es gibt also keinen Weg, um effektiv zu "Zellen verbinden" in der Tabelle sprechen. Sollten Sie die line-height auf die Höhe des "zwei-line" Elemente und verwenden Sie dann die vertical-align-Eigenschaft an, um Sie auszurichten.

InformationsquelleAutor prodigitalson
0

Wenn ich das richtig verstehe, wollen Sie eine horizontal angezeigte Liste, wo jedes Element hat eine festgelegte Breite und Höhe, aber der text ist vertikal zentriert, und es können Elemente, die zwei Zeilen text.

Wenn Sie wissen, pre-rendering, die Elemente werden mit zwei Linien, die Sie anwenden können, die eine CSS-Klasse, setzt die line-height: 40px; nur auf die Elemente, die mit einer einzigen Zeile. Dies ist normalerweise nicht der Fall angenommen, so dass der beste Weg zu gehen ist die Verwendung von JS, um dinamically verändern Sie die line-height nach der Liste gerendert wurde.

Sehen dieses jsfiddle: http://jsfiddle.net/UEsAS/2/

Im wesentlichen ändern von CSS, um keine Höhe festlegen, auf der lis (dies wird dazu führen, dass Sie werden, haben eine geringere Höhe, wenn Sie sind ein-Linie, die ist, wie Sie erkennen können, welche zu verändern). Führen Sie dann die folgenden (vorausgesetzt, jQuery):
```
$(function() {
    var maxHeight = 40;
    $('li').each(function(i, el) {
        if ($(el).height() < maxHeight) {
            $(el).css('line-height', maxHeight + 'px');
        }
    });
});
```
InformationsquelleAutor Ezequiel Muns

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.