Mit Zeilenumbrüche zwischen s

Question

Ich habe ein horizontales Menü, bestehend aus <li> Elementen mit display: inline.

Die Elemente sollen miteinander nahtlos neben sein.

Im Quellcode, ich mag jeden li zum leichteren Debuggen auf einer Linie haben:

<li class="item1 first"> ... </li>
<li class="item2"> ... </li>
...

Wenn ich jedoch ein \n nach jedem Elemente hinzuzufügen, haben die Menüpunkte eine Lücke zwischen ihnen. Ich nehme dies das gewünschte Verhalten, aber ist es eine Möglichkeit, um es auszuschalten ein cleveren „white-space“ mit Einstellung oder etwas?

  

Edit: Ich nicht float verwenden kann, ist dies in einem CMS mit der Option, die Listenelemente zum Zentrum

.

Answer 1

Sie können die Rendering-Probleme vermeiden, aber den Code wartbar wie diese halten:

<ul
  ><li>item 1</li
  ><li>item 2</li
  ><li>item 3</li
></ul>

Es die Leerzeichen entfernt, aber es ist immer noch leicht die Elemente in einem Texteditor zu bearbeiten, sofern Ihr CMS verwirrt nicht mit dem Markup geben Sie!

Answer 2

Haben Sie die Möglichkeit, das CSS zu bearbeiten? Wenn ja, versuchen Sie könnten die Polsterung / Ränder auf der

-Element anpassen. Es scheint viel Aufwand der Lesbarkeit zu sein.

Je nachdem, welchen Browser Sie verwenden, können Sie die HTML-Tidy http: //users.skynet .be / mgueury / mozilla / , mit dem Sie die Möglichkeit gibt, Ihre Quelle aufzuräumen, die für die Fehlersuche

nützlich genug sein könnte

Answer 3

CSS + float ist dein Freund.

Answer 4

HTML ist Leerzeichen unabhängig - so das Hinzufügen Zeilenumbrüche keine Auswirkungen haben sollte. Some Rendering-Engines der Browser nicht ganz dieses Recht jedoch.

Was möchten Sie wahrscheinlich zu tun ist hinzuzufügen

float: left;

Ihre li-Tags sie nebeneinander zu erhalten.