Меню Nav - Отображение символов разделительной трубы

Question

У меня есть веб-контроль с несколькими ссылками вверху, например:

Link 1 | Link 2 | Link 3

В настоящее время каждый из них является asp: Hyperlink. Is there a clever solution for rendering out the dividing pipe characters?

В настоящее время они находятся внутри заполнителя. Мы не можем гарантировать, что данная ссылка всегда появляется. Мне не нужен действительно большой оператор if, и я не хочу отображать все ссылки исключительно в коде позади ...

[Update]

Спасибо, что указали, что CSS - это путь. Это, конечно, сделало вещи проще. Нам, конечно же, нужно кросс-браузерное решение.

Структура списка HTML ( & ) обрабатывает запрос, как first-child / last-child свойства заботятся о конце списка. Примечание : Они автоматические - их не нужно назначать в разметке.

Поскольку нам нужны были только символы канала, я использовал свойство border. При желании можно использовать свойства CSS margin-left + background image, чтобы вместо него была вставка изображения.

Наше решение:

HTML:

<ul class="navMenu">
    <li><a href="...">Link 1</a></li>
    <li><a href="...">Link 2</a></li>
    <li><a href="...">Link 2</a></li>
</ul>

CSS:

ul.navMenu li
{
    display: inline;
    margin-left: 0;
}

ul.navMenu a
{
    border-left: solid 1px #333333;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

ul.navMenu li.first-child a
{
    border-left: none 0;
    padding-left: 0;
}

Answer 1

К сожалению, решение a + a CSS работает не во всех браузерах.

Я обычно отмечаю свой список как:

<ul>
    <li class="first-child"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="last-child"><a href="#">Link 3</a></li>
</ul>

Мало того, что это обеспечивает лучшие хуки JavaScript, но вы можете настроить левый / правый элемент, чтобы отключить границу или настроить отступы по мере необходимости.

Answer 2

метод CSS и / или JQuery прекрасно работает. Иногда вы действительно можете просто хотеть <a></a> | <a></a> | <a></a>.

Возможно, стоит взглянуть на пару серверных элементов управления. В зависимости от того, где вы получаете ссылки (вы сказали, что некоторые из них могут отсутствовать?), Вы можете просто использовать элемент управления, там есть место, где вы можете поместить |. Если ссылки отсутствуют в зависимости от того, кто вошел в систему и какие-то роли пользователей, возможно, вы можете использовать sitemap + control, у него тоже есть.