Наличие разрывов строк между <li>с

Question

У меня есть горизонтальное меню, состоящее из <li> элементов с display: inline.

Предполагается, что элементы находятся рядом друг с другом без проблем.

В исходном коде я бы хотел, чтобы каждый li был в одной строке для упрощения отладки:

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

Однако, если я добавлю \n после каждого элемента, пункты меню будут иметь разрыв между собой. Я так понимаю, это предполагаемое поведение, но есть ли способ отключить его с помощью умного «пробела» или что-то в этом роде?

Редактировать: я не могу использовать float, это в CMS с возможностью центрировать элементы списка.

Answer 1

Вы можете избежать проблем рендеринга, но сохранить поддерживаемый код следующим образом:

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

Удаляет пробелы, но редактировать элементы в текстовом редакторе все равно легко, при условии, что ваша CMS не связывается с введенной вами разметкой!

Answer 2

У вас есть возможность редактировать CSS? Если это так, вы можете попробовать настроить отступы / поля для элемента

. Похоже, что читаемость требует больших усилий.

В зависимости от того, какой браузер вы используете, вы можете получить HTML Tidy http://users.skynet.be/mgueury/mozilla/,, который дает вам возможность привести в порядок ваш исходный код, который может быть достаточно полезен для отладки

Answer 3

HTML не зависит от пробелов, поэтому добавление разрывов строк не должно иметь никакого эффекта. Однако некоторые механизмы рендеринга браузера не совсем правильно понимают это.

Что вы, вероятно, хотите сделать, это добавить

float: left;

к вашим тегам li, чтобы получить их рядом друг с другом.

Answer 4

CSS + float - твой друг.