CSS Menü Autobreite - Links mit mehreren Worten Linie brechen

Question

Hier ist eine Live-Demo für Ihre Bequemlichkeit: http://jsfiddle.net/Lr6NQ/2/

Auf ul#navigation ul, wenn es eine explizite Breite ist, die Links auf ihre eigenen „Linie“ erscheinen, wie beabsichtigt. Da die Links jedoch unterschiedliche Breiten haben, lasse ich sie lieber als "auto", so dass die <ul> nicht wirklich breit ist für Listen mit kurzem Inhalt.

Wie kann ich verhindern, dass die Verbindung von der Leitung bricht, ohne eine explizite Breite festzulegen. Wenn die Verbindung ein Wort ist, bekomme ich den gewünschten Effekt, aber mit mehreren Wörtern ist die <ul> nur so breit wie das längste Wort.

Answer 1

ul#navigation li { 
    white-space:nowrap; /* <-- ADDED */ 
    float:left; 
    width:auto; 
    padding:10px; 
    margin-right:10px; 
    position:relative; 
} 

Wenn Sie eine <br /> im Anker langen Linien verkürzen wollen hinzuzufügen.

Answer 2

Sie können nicht schließende Leerzeichen verwenden. Verwenden Sie anstelle der Leerzeichen in der Verknüpfung & nbsp ;.