탐색 표시 줄, 목록 항목 사이에 공백이 있음

나는 전통적인 탐색을 만들었습니다. 각 li 사이에 너비가 1px이고 높이가 Nav 막대보다 약간 작은 div를 넣습니다. 탐색 표시 줄, 목록 항목 사이에 공백이 있음

기본적으로 나는이보기를 위해가는 :

HTML :

<nav> 
    <ul> 
    <div></div> 
    <li><a href="#">Domov</a></li> 
    <div></div> 
    <li><a href="#">Služby</a></li> 
    <div></div> 
    <li><a href="#">O nás</a></li> 
    <div></div> 
    <li><a href="#">Kontakt</a></li> 
    <div></div> 
    </ul> 
</nav>

CSS :

nav ul div { 
    height:31px; 
    width:1px; 
    background-color:#34b9ff; 
    display:inline-block; 
} 

nav ul li { 
    display:inline; 
} 

nav ul li a { 
    display:inline-block; 
    padding:10px;

내가 디스플레이 사업부를 변경 : 인라인; 텍스트가 제대로 작동하지만 보이는 공간이 사라집니다.

출처

2013-04-10 IamLee

가능 중복 [IMG 요소 주위 공간 유래 않는 경우? (http://stackoverflow.com/questions/15380670/where-does-the-space-around-img-elements-originate) –

위의 복제본에서 허용되는 대답에서 - 그것은 당신의 HTML에서'inline'과'inline-block' 요소 사이의 공백 때문에 발생합니다. 또한'div' 엘리먼트가'ul' 엘리먼트를 직접적으로 받아 들여서는 안되기 때문에 HTML이 유효하지 않습니다. –

문제 1 : li을 제외한 ul에 다른 사람을 배치 할 수 없습니다. 나는 구문 쓸모 스타일-된 div를 건너 또 다른 접근 방식을 생각 하는데요 : 0으로 font-size을 설정하고 li에를 재설정하여 인라인 요소 사이에 공백을 피할 수

JS-Fiddle Example

nav ul li { 
    font-size: 16px; 
    display:inline; 
    padding: 2px 0px; 
    border-right: 1px solid blue; 
}

. 당신이 요소를 HTML에 선언되는 방식에 변화를 원하지 않는 경우

출처

2013-04-10 13:28:23 nirazul

그래, 그게 내 두 번째 옵션인데, 예제의 그 경계는 li elemnt와 같은 높이가 될 것이고 나는 약간 더 길게 원했지만 어쨌든 나는 당신의 예제를 사용할 것이라고 생각한다. :) – IamLee

오 그게 쉽게 끝났어! 목록 항목에 패딩을 추가하기 만하면됩니다. 내 업데이트 된 바이올린을 참조하십시오. 질문에 대한 답변이있을 때, 가장 도움이 된 대답을 받아 들여야합니다. 그렇지 않으면 적게는 사람들이 당신을 도우려고 노력할 것입니다 :) – nirazul

감사합니다, 다소 stackexchange 사이트에 새로운 :) – IamLee

UL에서 DIV를 가질 수 있다고 생각하지 않습니다. 적절한 스타일을 추가하여 LI로만 동일한 결과를 얻을 수있을 것이라고 확신합니다.

출처

2013-04-10 13:28:20 AndreCruz

'ul' 안에'div'가 HTML5와 호환되지 않습니다. 더 많은 목록 항목. http://www.w3.org/TR/html5/grouping-content.html # the-ul-element – Exelian

다음 display:inline;이

전체 CSS를

과 같을 것이다 대신 background-color: 의

border-left:1px solid #34b9ff;

를 사용하고 사용

nav ul div { 
    height:31px; 
    width:1px; 
    border-left:1px solid #34b9ff; 
    display:inline; 
}

Here's the fiddle

출처

2013-04-10 13:28:30 GeekyCoder

이 경우 가장 큰 문제는 li 사이에 공백이 없어야한다는 것입니다.

다음 jsFiddle 정확히 내가 원하는 것이라고 생각하는 공간에서 결과를 제거하여 코드를 보여줍니다.

http://jsfiddle.net/jPF2p/

출처

2013-04-10 13:33:14 Exelian

그게 정확히 내가 가지고있는 문제, 리가 아래로 밀어 얻을 :/어쨌든 내가 할 수 없다는 것을 몰랐다 li 사이의 무엇이라도, 그것을 지적하기위한 매우 감사 :) – IamLee

탐색 표시 줄, 목록 항목 사이에 공백이 있음

답변

관련 문제