Меню вкладок перекрывается

Question

Я создал меню CSS, но отдельные вкладки, или, вернее, ряд вкладок, похоже, перекрывают друг друга. Я использовал пробел: предварительная упаковка с шириной в самом меню вкладок:

html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}

#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}

Answer 1

не уверен, что это то, что вы хотите, но я думаю, что вы можете пропустить float: left в вашем li

код: http://jsfiddle.net/vT5vd/

BTW списки являются фантастическими для меню и используются почти исключительно!

Answer 2

Вкладки обрабатываются как строка текста.Межстрочный интервал устанавливается на высоту текста, в результате чего вкладки большего размера перекрываются.Чтобы исправить это, просто добавьте высоту строки: 1,8;строка в файл CSS в разделе элемента списка вкладок.Также.Вы можете поместить тег разрыва или абзаца в список вкладок, чтобы контролировать, где они переносятся на следующую строку и не разбивать вкладку.

ul.tabs li a
{
    font: normal 18px Verdana;
    line-height: 1.8;
    text-decoration: none;
    position: relative;
    padding: 0px 8px;
    border: 1px solid #CCC;
    border-bottom-color:#AAA;
    color: #000;
    background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
    border-radius: 2px 2px 0 0;
    outline:none;
}

Answer 3

Как правило, не вводите LI для меню, вводите тег A и используйте display:block или inline-block