Дополнительное дополнение в навигации на основе CSS

У меня возникли проблемы с навигацией на основе CSS. Я придумал. По какой-то причине между каждым навигационным элементом расположено небольшое количество дополнений (3 пикселя или около того) справа от вертикальной линии. Кроме того, в firefox белый: зависание слегка смещается, делая его более похожим на вкладку навигации, когда вы наводите на нее курсор. Вот jsfiddle:Дополнительное дополнение в навигации на основе CSS

https://jsfiddle.net/9m24tf4a/7/

На стороне записки, есть простой способ, чтобы иметь вертикальные линии занимают 90% от высоты, а?

HTML:

<div id="header_nav"> 
    <ul> 
     <li><a href="#" class="first">Home</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     <li><a href="#">Link 5</a></li> 
     <li><a href="#">Link 6</a></li> 
    </ul> 
</div>

CSS:

#header_nav { 
margin: 0px; 
padding: 0px; 
clear: both; 
height: 36px; 
background-color: #ccc; 
border-top: 1px solid #b6b2a9; 
border-bottom: 1px solid #b6b2a9; 
} 
#header_nav ul { 
width: 1000px; 
padding: 0px; 
line-height: 36px; 
margin: 0px 100px 0px 100px; 
} 
#header_nav ul li { 
list-style-type: none; 
display: inline-block; 
font: 14px/36px 'Arial', sans-serif; 
color: #555559; 
height: 36px; 
line-height: 36px; 
padding: 0px; 
margin: 0px; 
width: auto; 
border-right: 1px solid #b6b2a9; 
} 
#header_nav ul li:hover { 
background-color: #fff; 
width: auto; 
} 
#header_nav ul li a { 
font: 14px/36px 'Arial', sans-serif; 
color: #555559; 
text-decoration: none; 
line-height: 36px; 
margin: 0 17px; 
padding: 0px; 
} 
#header_nav ul li.first { 
/* border-left: 1px solid #b6b2a9; */ 
/* margin-left: 0px; */ 
}

источник

2015-04-25 dmkr

Там же известная обивка порождена элементами LI отображается инлайн. Вы либо работаете с float: left, либо устанавливаете font-size: 0 в элемент UL, а затем возвращаетесь назад и устанавливаете его обратно на нужный размер шрифта самому элементу LI.

Вот фрагмент с размером шрифта: 0; к элементу UL.

#header_nav { 
 
margin: 0px; 
 
padding: 0px; 
 
clear: both; 
 
height: 36px; 
 
background-color: #ccc; 
 
border-top: 1px solid #b6b2a9; 
 
border-bottom: 1px solid #b6b2a9; 
 
} 
 
#header_nav ul { 
 
width: 1000px; 
 
padding: 0px; 
 
line-height: 36px; 
 
margin: 0px 100px 0px 100px; 
 
    font-size: 0; 
 
} 
 
#header_nav ul li { 
 
list-style-type: none; 
 
display: inline-block; 
 
font: 14px/36px 'Arial', sans-serif; 
 
color: #555559; 
 
height: 36px; 
 
line-height: 36px; 
 
padding: 0px; 
 
margin: 0px; 
 
width: auto; 
 
border-right: 1px solid #b6b2a9; 
 
    font-size: 16px; 
 
} 
 
#header_nav ul li:hover { 
 
background-color: #fff; 
 
width: auto; 
 
} 
 
#header_nav ul li a { 
 
font: 14px/36px 'Arial', sans-serif; 
 
color: #555559; 
 
text-decoration: none; 
 
line-height: 36px; 
 
margin: 0 17px; 
 
padding: 0px; 
 
} 
 
#header_nav ul li.first { 
 
/* border-left: 1px solid #b6b2a9; */ 
 
/* margin-left: 0px; */ 
 
}

\t <div id="header_nav"> 
 
\t \t <ul> 
 
\t \t \t <li><a href="#" class="first">Home</a></li> 
 
\t \t \t <li><a href="#">Link 2</a></li> 
 
\t \t \t <li><a href="#">Link 3</a></li> 
 
\t \t \t <li><a href="#">Link 4</a></li> 
 
\t \t \t <li><a href="#">Link 5</a></li> 
 
\t \t \t <li><a href="#">Link 6</a></li> 
 
\t \t </ul> 
 
\t </div>

источник

2015-04-25 05:51:55 designarti

Вы можете попробовать использовать "float: left" вместо "display: inline-block", если вы знакомы с ним:

#header_nav ul li { 
    ... 
    float: left; 
    ... 
}

источник

2015-04-25 05:52:18 overshadow

Дополнительное дополнение в навигации на основе CSS

ответ

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