Как я могу сделать это меню, используя list и css?

Question

У меня есть меню вроде этого , но как вы можете видеть код не так "хорошо".

Мне бы хотелось, чтобы поле между словом и границей былонапример, всегда 5px для каждого слова.

Я знаю, что должен использовать List для такого рода вещей, но я не знаю, как применить стиль CSS с кросс-браузерной совместимостью.

Можете ли вы дать мне пример этого меню со списком?

Answer 1

Вот как я это сделаю:

См .: http://jsfiddle.net/thirtydot/554BT/3/

<ul class="menu">
    <li>Home</li>
    <li>Incredible</li>
    <li>One</li>
</ul>

.menu { 
    width:545px;
    float:left;
    margin: 0;
    padding: 0;
    list-style: none
}
.menu li {
    float: left;
    text-align: center;
    padding: 0 15px;
    border-left: 2px solid red
}
.menu li:first-child {
    border: 0
}

Answer 2

Я бы так и сделал, чтобы было как можно проще (проще).Это, вероятно, не становится менее сложным, чем это:

HTML

<ul id="menu">
    <li>Home</li>
    <li>Incredible</li>
    <li>One</li>
</ul>

CSS

#menu {
    list-style-type: none; 
}
#menu li {
    display: inline-block;
    padding: 0 10px;
    border-left: 2px solid red;
} 
#menu li:first-child {
    border-left: none;
}

DEMO: jsfiddle

Answer 3

Пробел между границами делает это =

Поместите границу с правой стороны от li, а вторая кнопка поставьте границу с левой стороны от li.

Теперь добавьте margin-left (или margin-right) и посмотрите, как он расширяется.

Это сработало в моем случае.

Удачи.

Answer 4

Пример CSS3, не совсем кросс-браузерный, так как использует псевдоселекторы CSS3 Меню списка CSS3

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

Answer 5

Попробуйте это ...

скрипка: http://jsfiddle.net/anish/Laqqn/

<style type="text/css">
    .menu
    {
        width:500px;


    }
    .menu li
    {
        width:100px;
        text-align:center;
        float:left;


       border-right:1px solid red;

    }
    </style>
    <ul class="menu">
        <li>Home</li>
        <li>Incredible</li>
        <li>One</li>
    </ul>

Answer 6

Проверьте Listmatic для примеров всех основных макетов списка.

Похоже, вы хотите что-то вроде this .