css - горизонтальное меню - фоновой цвет

У меня есть горизонтальное меню. Я хочу иметь границу вокруг меню (а не целую строку, закрывается только пространство). Когда я помещаю границу на ul, она охватывает всю строку, когда я помещаю границу на li, она также имеет границу между пунктами меню.css - горизонтальное меню - фоновой цвет

<ul id="menu" style = "text-align:left;"> 

        <li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff... 
        </li><li>...anchor stuff...</li> 
       </ul>

Вот CSS:

ul#menu 
{ 
    padding: 0 0 0px; 
    position: relative; 
    margin: 0 0 0; 
    text-align: right; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

ul#menu li 
{ 
    display: inline; 
    list-style: none; 
} 


ul#menu li a 
{ 
    padding: 0px 0px; 
    margin-right:20px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
}

источник

2010-10-16 TPR

Вы понимаете код? Почему вы устанавливаете text-align: слева на элементе #menu inline и выравниваете по тексту: справа на том же элементе в CSS? –

Кроме того, почему вы установили позицию: относительный элемент #menu? Кажется, что нет необходимости в этом ... –

Убить display: inline в списке предметов и поплавать им слева. Поплавок также контейнер, который будет гарантировать, что это только как wiide, как его содержимое. Наконец, установите overflow: hidden на ул.

источник

2010-10-16 20:02:33

Объявить ul с display:inline-block. Это приведет к тому, что ul займет всего пространство, необходимое для отображения его содержимого, а не 100% его.

An example

источник

2010-10-16 18:03:44

Я считаю, что встроенный блок не поддерживается в IE6/7. Если да, можно ли его использовать в качестве решения? –

Использование display: inline-block на ul и добавить границу к ul.

источник

2010-10-16 18:04:05 casablanca

Если вам нужна совместимость с IE6:

#menu li { 
    border-top: 1px solid #000; 
    border-bottom: 1px solid #00; 
    }

Вы можете быть в состоянии использовать li:first-child (я не помню, и не иметь копию IE6 для тестирования с) применять:

#menu li:first-child { 
    border-left: 1px solid #000; 
    }

Но вы, вероятно, придется добавить либо class -name или id, первым и последним li элементов, чтобы дать им соответствующую border-left и border-right.

источник

2010-10-16 18:34:10

css - горизонтальное меню - фоновой цвет

ответ

Смежные вопросы