CSS: Wie Breite von 100% auf der ersten li von ul einzustellen

Ich habe ein einfaches UL Navigationsmenü mit einer Breite von 1000px:CSS: Wie Breite von 100% auf der ersten li von ul einzustellen

<ul class="menu"> 
    <li class="first"><a href="/">google</a></li> 
    <li><a href="/">google</a></li> 
    <li><a href="/">google</a></li> 
</ul>

Also, wie kann ich das erste Element stellt Sie den gesamten UL passen Breite und drücken Sie die anderen Listenelemente auf der rechten Seite (alle LIs sollten sich in derselben Zeile befinden - horizontales Menü)?

Ich weiß, ich könnte float:left die erste und float:right den Rest, aber das wird die Reihenfolge der rechts - floated Elemente umkehren.

Ich brauche eine schnelle, nur CSS Lösung, die sogar in IE6 funktioniert.

Vielen Dank im Voraus!

UPDATE: Um zu verdeutlichen, das erste Element ist ein Logo, das Endergebnis ist wie die Kopfzeile von 9gag.com mit Ausnahme des Logos sollte auf der linken Seite und alle Links auf der rechten Seite sein.

Quelle

2012-03-30 Tony Bogdanov

In welcher Reihenfolge möchten Sie diese haben? Nehmen wir an, der erste Li ist 1 und der zweite ist 2, der dritte ist 3. Sie wollen sie in einem horizontalen Menü inline? –

Ja. Zur Klarstellung wird das erste ein Logo sein. Das Endergebnis wird wie 9gag.com sein, aber alle Links außer dem Logo sollten auf der rechten Seite sein. –

Wenn ich Sie wäre, würde ich das Logo nicht dort setzen. Ich würde einen div genannten Header haben, der das Logo und das Menü getrennt enthält. Viele Möglichkeiten, dies zu tun, das macht für mich am meisten Sinn. –

Logo in der Regel nicht Bestandteil des Navigationsmenü sein sollte. Es ist angemessener, sie als Kopfzeile zu markieren (H1 auf der Startseite und H3 auf den Restseiten).

<h3><a href="/">MyBrand</a></h3> 

<ul> 
    <li><a href="/products/">Products</a></li> 
    <li><a href="/about/">About</a></li> 
    <li><a href="/contact/">Contact</a></li> 
</ul>

können Sie verwenden dann float: right für Ihre UL Liste selbst Menü rechts auszurichten.

Quelle

2012-03-30 22:03:26

Ich habe es einfach ausprobiert und es hat wunderbar funktioniert, habe keine Ahnung, warum es nicht das erste Mal war, als ich es versuchte. –

Übrigens, hat das Wrapping des Logos (es ist ein Bild) in h1/h3 irgendeine semantische Bedeutung oder ..? –

Solange das Bild den korrekten Text (alt = Text) hat, sollte es eine ähnliche Bedeutung haben wie der Text, der identisch mit dem Inhalt des Attributs alt ist. Ich persönlich bevorzuge Bildersatztechniken für Dinge wie Logos, während ich einfachen Text im HTML-Code habe. –

nutzen Sie einfach die CSS

.menu li 
{ 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
}

Quelle

2012-03-30 21:54:12 hjpotter92

Jetzt mit mehr Klarheit:

http://jsfiddle.net/6DkVx/2/

ul { 
    width: 1000px; 
    position: relative; 
    text-align: right; 
} 
li { 
    display: inline-block; 
} 
.first { 
    position: absolute; 
    top: 0; left: 0; 
}

Quelle

2012-03-30 21:57:15 mikevoermans

Überprüfen Sie die aktualisierte Frage, sorry für die Verwirrung :) –

@Tony aktualisierte Antwort für Ihre geklärte Frage. – mikevoermans

Das sollte funktionieren, aber ich werde mit Marat Tanalins Lösung gehen.Schade, dass ich beide Lösungen nicht akzeptieren kann. –

dieses Beispiel Siehe, ich weiß nicht, Ihr Menü dynamisch ist, aber wenn Sie ein ‚width‘ für andere li haben, ist einfacher

Demo: http://jsfiddle.net/e6SWD/12/

.menu { 
    margin-left: 84px; /* width others 2 li's */ 
    width: 1000px 
} 

.menu li { 
    display: inline; 
} 

.menu li.first { 
    display: block; 
    float: left; 
    margin-left: -84px; /* width others 2 li's */ 
    width: 100% 
}

Quelle

2012-03-30 22:10:14 fbadaro

Es ist dynamisch, danke aber! –

Wie bereits erwähnt vor Trennen Sie das Logo von der Hauptnavigation. Tun Sie stattdessen so etwas.

<div id="header> 
<div id="logo">Logo here</div> 
<ul><li>Rest of links here</li></ul> 
</div>

Der Header div ist der Wrapping div. Sie können dies in <header></header> ändern, wenn Sie HTML5 machen wollen (dies wird in allen Browsern funktionieren, sogar alten). Dann legen Sie die Breite des Logos fest, Sie können dort auch einen Link verwenden. Und schweben Sie die UL und das Logo nach links.

Quelle

2012-03-30 22:16:14 justanotherhobbyist

CSS: Wie Breite von 100% auf der ersten li von ul einzustellen

Antwort

Verwandte Themen