2010-10-10 20 views
6

Hey, Gibt es eine Möglichkeit, Browser dazu zu bringen, Zeilenumbrüche in der Quelle zu ignorieren?HTML/CSS - Leerzeichen aus Zeilenumbrüchen im Code für LI entfernen

<div id="navbar"> 
    <div id="navbar-container"> 
     <ul> 
      <li>HOME</li> 
      <li>TUTORIALS</li> 
      <li>BLOG</li> 
      <li>FORUMS</li> 
      <li>LINKS</li> 
      <li>&nbsp;</li> 
     </ul> 
    </div> 
</div> 

#navbar { 
    background:#FFF; 
    width:940px; 
    margin:auto; 
    border-radius: 10px 10px; 
    -webkit-box-shadow: 5px 5px 10px #888; 
} 
#navbar-container { 
    margin:auto; 
} 
#navbar-container ul { 
    list-style:none; 
    text-align:center; 
    display:block; 
    width:auto; 
    padding:0; 
    margin:0; 
} 
#navbar-container li{ 
    list-style:none; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    padding:0 7px 0 10px; 
    margin:0; 
    white-space:nowrap; 
} 
#navbar-container li:hover{ 
    color:#FFF; 
    background:#000; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    margin:0; 
    padding:0 7px 0 10px; 
} 

Es ist ein kleiner Raum zwischen jedem LI platzieren, habe ich es so ist, dann horizontal in einer Reihe aufstellen einzurichten, könnte ich nur die Zeilenumbrüche in der Quelle entfernen, aber id lieber nicht.

Antwort

9

Sie können sie schweben (entweder left oder right), oder Sie können einen Kommentar-out die Räume:

<ul> 
    <li>...</li><!-- 
    --><li>...</li> 
</ul> 

Oder lassen Sie einfach die Tags offen ‚bis zum nächsten Linie.

+0

Agh, schlag mich auf die offene Tag-Lösung. Ich habe noch nie ein Problem in irgendeinem Browser außer IE gesehen. – jball

+1

das Verlassen der Tags offene Lösung funktioniert, gibt Ihnen die Antwort, wie Sie die Lösung zuerst gegeben. Vielen Dank! – Diesal11

+0

Es ist einer meiner Favoriten =) –

0

Alle Browser sollten Whitespace vollständig ignorieren. Gibt es einen bestimmten Browser, der Ihnen Probleme bereitet?

Versuchen:

li { margin: 0; padding: 0 } 
+0

es ist auf allen von ihnen, IVE bereits den Rand auf 0 gesetzt und die Polsterung auf jeder Seite ist eingestellt, um den Text etwas Platz zu geben, schlecht aktualisieren Sie die Frage mit CSS – Diesal11

+2

Sie "ignorieren" nicht Leerzeichen, sie verkleinere es einfach in ein einzelnes Leerzeichen. Dies wird als Pause zwischen den Zeilen ausgedrückt, wenn sie in der Zeile angezeigt werden. Wenn sie schweben, wird es ignoriert. –

+0

Dann wäre vielleicht ein besserer Ansatz, sie irgendwie als Raum zu behandeln anstatt als Br ... Ich weiß, das hätte mein Leben ein paar Mal viel einfacher gemacht, wenn ich hätte herausfinden können, wie. – RonLugge

2

IE scheint, dass als ein Überfall aus den Tagen, wenn Listenelemente nicht schließende Tags hatten. Ein üblicher Weg, um das ist das Schließen> in der nächsten Zeile zu setzen, dh

<ul> 
     <li>HOME</li 
     ><li>TUTORIALS</li 
     ><li>BLOG</li 
     >etc... 
0

ich das Gleiche fragen, und was für mich gearbeitet wurde:

li { display: table-cell; } 

Alle Umbrüche werden ignoriert und jetzt Meine Menütasten sind direkt nebeneinander.

Sie können ein Live-Beispiel hier auf meiner Musik Website: http://www.yanike.tk

Ich habe einen CSS Sprit auf meinem UL LI für mein Navigationsmenü (zu Hause, Medien, ...).

Verwandte Themen