legen Sie alle verschachtelten li die Breite der breitesten li
Wie mache ich verschachtelten li die gleiche Breite?
Wenn ich den code unten jede verschachtelte li ist nur so breit wie text + Rand.
Ich würde gerne alle li ' s so breit wie die breiteste li unter der übergeordneten ul.
zB:
<ul id="menu">
<li <a href="#" title="Menu a">Menu a</a></li>
<li <a href="#" title="Menu b">Menu b</a></li>
<li <a href="#" title="Nested Menu">Nested Menu</a>
<ul>
<li <a href="#" title="Menu Item">Menu Item</li>
<li <a href="#" title="Long Menu Item">Long Menu Item</a></li>
<li <a href="#" title="Longer Menu Item">Longer Menu Item</a></li>
</ul>
</li>
<li <a href="#" title="Menu z">Menu z</a></li>
</ul>
mit css:
<style type="text/css" media="all">
* {
padding:0;
margin:0;
}
body, html {
width: 100%;
height: 100%;
}
#wrapper {
width: 800px;
height: 100%;
margin: auto;
}
#menu {
margin: 0 0 0 8px;
padding: 0;
font-size: 14px;
font-weight: normal;
}
#menu ul {
list-style-type:none;
list-style-position:outside;
position:relative;
z-index:300;
height: 32px;
font-weight:bold;
white-space: nowrap;
padding:0;
}
#menu a {text-decoration:none;
line-height: 32px;
}
#menu a:hover {
}
#menu li {
float:left;
position:relative;
display: inline;
height: 100%;
list-style-type: none;
padding: 0 20px;
background: #ccc;
}
#menu ul {
position:absolute;
display:none;
left:0px;
background: #BDCCD4;
width:100%;
}
#menu ul a, #menu li a {
display: block;
}
#menu li ul {
background: #BDCCD4;
display:block;
}
#menu li ul a {
font-weight: normal;
height:auto;
float:left;
}
#menu ul ul {
padding: 0 9px;
display:block;
}
#menu li ul li {
padding: 0 9px;
background: #BDCCD4;
}
#menu li:hover {
background: #ddd;
height: 32px;
}
#menu li li:hover, #menu li li li:hover {
background: #ddd;
height: 32px;
}
#menu li a:link, #menu li a:visited {
text-decoration: none;
color: #003E7E;
margin: auto;
}
Erstellt jsFiddle: jsfiddle.net/y83zm
InformationsquelleAutor nugget | 2010-06-15
Du musst angemeldet sein, um einen Kommentar abzugeben.
Alle Listenelemente die gleiche Länge wie die längste, müssen Sie manuell die Breite. Es ist keine Reine CSS-Methode, dies zu erreichen, automatisch, soweit ich weiß.
li{width:100%} Wird die Liste der Elemente füllen die Breite der container. Wenn das nicht gesetzt ist, dann wird es die Breite der Benutzer-browser-Fenster.
verdammt - das macht es schwer mit dynamischen Inhalten!
Schön. Ich nehme an, ein conditional stylesheet Hinzugefügt werden kann, legen Sie die Breite für <=IE 7
hey Jungs, danke für alle Ihre Vorschläge - ich landete Einstellung der Breite, der manuell nur weil width:100% hat nicht funktioniert in Chrome. cheers
Konnten Sie bei der Bearbeitung der post, in dem Sie sagen, dass es ist möglich? Dies ist die akzeptierte Antwort, nachdem alle
InformationsquelleAutor theorise
Einfach hinzufügen
width: 100%
für#menu li ul li
für mich funktioniert. Machen es Arbeit für noch mehr Gegenstände verwendenwidth: auto
auf#menu li ul
. EDIT 2: zusätzlicher Polsterung Abhilfe.Die neue CSS:
Das Ergebnis ist hier: http://jsfiddle.net/y83zm/2/
EDIT 2 Hinzugefügt Update zu lösen, eine seltsame padding-Problem, siehe http://jsfiddle.net/y83zm/5/
Konnte Sie Bearbeiten die jsFiddle ich zur Verfügung gestellt, um es schief gehen, klicken Sie auf "Update" und poste den neuen link? Auch, welchen browser(N) sind Sie targeting? Ich kann keine Garantie für IE6.
Never mind, habe es selbst bearbeitet und die Lösung. Hilft das? Funktioniert bei mir im Firefox. (Oh, und wenn die Lösung funktioniert, könnte Sie markieren es als solches?)
wow - noch nie verwendet, bevor und sehr praktisch: > jsfiddle.net/y83zm/4
Nun, werfen Sie einen Blick auf jsfiddle.net/y83zm/2. Nicht, dass die Ihren Anforderungen gerecht werden? Es ist eigentlich eine noch längere Artikel 🙂 ich habe den zusätzlichen code, um die Lösung vor!!!
InformationsquelleAutor MvanGeest
Müssen Sie JavaScript verwenden, um alle
LI
s die gleiche Breite als die breitesteLI
. Hier der code, wenn Sie möchten, verwenden Sie die jQuery-Bibliothek:CSS ändern:
Check it out auf JSFiddle.
Edit: Behoben, mein Missverständnis. 🙂
Erhalten Sie die parent-LI die gleiche Breite als die breiteste Untermenü LI. Wenn dies nicht erwünscht ist, den Sie gehen sollten mit der reinen CSS-Lösung. 🙂
InformationsquelleAutor Gert Grenander
Gäbe es eine sehr einfache dynamische Lösung. Um die CSS, wie du es gepostet hast in der Frage, fügen Sie einfach
und dann wird es genau so, wie Sie es haben wollen.
Können Sie sehen, wie es hier aussieht: http://jsfiddle.net/ramsesoriginal/y83zm/61/
InformationsquelleAutor ramsesoriginal
Einem einfachen jQuery-Lösung, die für mich gearbeitet:
InformationsquelleAutor user582860
Verwendete ich folgende CoffeeScript zu erreichen beschriebenen Verhalten:
InformationsquelleAutor Glutexo