100% horizontal cross-browser menu HTML/CSS?
Wie man 100% horizontal cross-browser menu HTML/CSS?
1. mit dem halten des sauberen HTML-Code, li
Liste
2. kein Bild/javascript, tabellenfreie, W3C standards compliance
Beispiel für ungültig Beispiel:
/*CSS doesn't make `block` right/left space between `li` items (see attached image)*/
#nav{
text-align:justify;
}
#nav li{ /*border:1px solid #000; margin-right:1px; margin-left:1px;*/
display:inline-block; white-space:nowrap;
}
#nav li#span{ /*hack to make 100% horizontal*/
display:inline-block; width:100%; height:1px;
}
*html #nav li,*html #nav li#span,*+html #nav li,*+html #nav li#span{ /*IE6/7 hacks tah are not working*/
display:inline;
}
und:
<div id="nav">
<ul>
<li>Home <!--unfortunately it doesn't work without space after each list,
need for some solution--></li>
<li>Services </li><!--don't want to add style for each list separated-->
<li>Portfolio </li>
<li>Clients </li>
<li>Articles </li>
<li>Contact Us </li>
<li id="span"></li><!--don't like to add any extra tag (like this),
but other way it doesn't work,
need for some solution-->
</ul>
</div>
- Sie könnten besser Antworten auf doctype.com
- Die gleiche Frage in doctype.com/IMB
InformationsquelleAutor Binyamin | 2010-07-12
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen, diese nur etwas weniger hacky version:
Es der IE7, der die Probleme verursacht.
CSS2.1
table
,table-cell
unterstützt, da IE8 und das rendering verbessert, Danktable-layout:fixed
. Leider hat es layout-Einschränkungen wiemargin
.https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Demo http://jsbin.com/AgiMoxu/9/edit
Gibt es eine Abhilfe für dieses, auch ohne Tabellen. Es ist nicht wirklich schön, aber funktioniert.
Der trick ist, dass man Sie als inline-Elemente in einem text im Blocksatz block. Die Worte der Blocksatz wird tun, was Sie wollen mit Ihren Etiketten. Aber da die Letzte Zeile der Blocksatz Blöcke sind Linksbündig, musst du am Ende den block mit einem Zeilenumbruch.
Einen ungetesteten Beispiel ist hier:
Warnung #1: es wird nicht funktionieren, wenn der Elternteil, der das äußere div (was ich nicht setzen Sie in diesem Beispiel) width: auto .
Warnung #2: man sollte nicht alle whitespace-Zeichen vor dem ersten und nach dem letzten -s und Ihre Eltern! Aber zwischen der internen Etiketten, die Sie benötigen (mindestens ein) Leerzeichen.
Warnung #3: es wird ein nicht benötigter newline nach dem letzten div. Wenn es ein problem für Sie, es gibt mehrere Lösungen zu machen Sie verschwinden, aber Sie sind noch nicht besser.