Ошибка валидатора HTML

Question

Я хочу, чтобы меню на моей странице выглядело так: О нас |Контакты |Карта.И у меня есть код для этого:

<div id="headermenu">
    <ul>
        <li> <a title="About us" href="index.php?id=about"><?php  echo $meniu['about']; ?></a></li> |
        <li> <a title="Contacts" href="index.php?id=contacts"><?php  echo $meniu['contacts']; ?></a></li> |
        <li><a title="Map" href="index.php?id=map"><?php  echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li>
    </ul>
</div>

Однако, валидатор HTML не любит эту идею и выдает мне ошибку: «здесь не разрешены символьные данные» и предлагает удалить |.Но я не хочу!Что мне делать?

Answer 1

Вы можете поместить его в <li>, так как валидатор жалуется на то, что текст находится за его пределами.

Но лучшим решением может быть создание вертикальной полосы с использованием CSS, установив правую границуна всех, кроме последнего <li> (назначьте последнему класс, чтобы вы могли очистить настройку границы только для этого).

Answer 2

Возможно, попробуйте добавить border-right к элементам li.Последним li это, конечно, не нужно.

Answer 3

Укажите стиль списка, чтобы элементы списка отображались горизонтально (например, display: inline-block;), и установите для их левой или правой границы значение medium solid black.

ul { display: block; }
li { display: inline-block; border-left: medium solid black;
     padding: 0 1ex; margin: 0; /* some spacing is nice */ }
li:first-child { border-left: none; }

Не должно быть никаких символьных данных непосредственно внутри элемента ul; разрешены только li элементы. Так что удалите эти столбики.

Answer 4

Вот так и поработайте с полями, чтобы они выглядели хорошо:

<div id="headermenu">
    <ul>
        <li> <a title="About us" href="index.php?id=about"><?php  echo $meniu['about']; ?></a></li>
        <li>|</li>
        <li> <a title="Contacts" href="index.php?id=contacts"><?php  echo $meniu['contacts']; ?></a></li>
        <li>|</li>
        <li><a title="Map" href="index.php?id=map"><?php  echo $meniu['map']; ?></a> <img alt="map icon" src="images/map_icon.png" /></li>
    </ul>