Горизонтальное меню, которое хорошо изменяет размеры

Question

Я борюсь со следующим горизонтальным меню:

http://jsfiddle.net/UeFeb/

Я бы хотел, чтобы каждый элемент <li> в меню был отделен обратной косой чертой.Я основал свое меню на этом методе: https://stackoverflow.com/a/6880421/556006

Как я могу получить меню для:

• Расположить косые черты в отрицательном пространстве между каждым элементом <li>так что они всегда располагаются между каждым последующим <li>
• Когда ширина браузера падает ниже 730 пикселей, автоматически изменяет размер до 2 строк по 3 <li> элементов (в данный момент он падает на один <li> вниз навремя по мере уменьшения ширины браузера)

Мысли?

Answer 1

Вы можете автоматически добавлять косые черты с помощью CSS, например:

#menu li:after {
    content: "\0020 \002F";
}

А что касается изменения размера, вы можете подделать его, используя @media запросы для этого. Посмотрите на эту демонстрацию (скорректируйте при необходимости):

http://jsfiddle.net/andresilich/UeFeb/1/

---

Переработан мой ответ на более удовлетворительный, вот разбивка для будущих пользователей:

HTML

<ul id="menu" style="list-style:none">
     <li><a href="#asics">ASICS</a></li>
     <li>/</li>
     <li><a href="#plants">PLANTS PLUS</a></li>
     <li>/</li>
     <li><a href="#tooheys">TOOHEYS</a></li>
     <li>/</li>
     <li><a href="#olympics">OLYMPICS</a></li>
     <li>/</li>
     <li><a href="#panadol">PANADOL</a></li>
     <li>/</li>
     <li><a href="#kia">KIA CADENZA</a></li>
</ul>

CSS

#menu {
    height: 125px;
    margin: 0 auto;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 90%;
}

#menu li {
    max-width: 150px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}

#menu:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

@media screen and (max-width:730px) {
    #menu {
        min-width: 1px;
        width: 35%;
    }
}

http://jsfiddle.net/andresilich/UeFeb/3/