목록 요소 사이의 불필요한 공간

문제는 끝났습니다. 이제 저는 웹 사이트 개발에 대해 고심하고 있습니다.목록 요소 사이의 불필요한 공간

문제는 내 웹 사이트에 (내가 크롬에서 그것을 볼 수 있어요) : 탐색 메뉴의 요소 사이 http://albertorestifo.com/

을 경계하고 다음 목록 요소 사이의 바람직하지 않은 공간이있다. '갤러리'에 마우스를 올리면 표시됩니다. 여기

<nav> 
      <ul> 
       <li class='active'><a href="/">Home</a></li> 
       <li><a href="/gallery/">Gallery</a></li> 
       <li><a href="/about/">About Me</a></li> 
       <li><a href="/contact/">Contact Me</a></li> 
      </ul> 
     </nav>

그리고 CSS : 여기

되는 HTML

header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; } 

header nav ul li { 
    display: inline-block; 
    line-height: 150px; 

    padding: 0 20px; 
    border-left: 1px solid #2d2d2d; 
} 
    header nav ul li:last-child { border-right: 1px solid #2d2d2d; } 

    header nav ul li:hover, header nav ul li.active { 
    background-color: #0072bc; 
    } 

    header nav ul li a { 
    text-decoration: none; 
    color: white; 
    font-size: 1em; 
    font-weight: 700; 
    text-transform: uppercase; 
    }

플러스 작은 리셋 :

ul, ul li { margin: 0; padding: 0; }

내가 Normalize.css를 사용하고 있음을 지적 , 모든 브라우저에서 표시해야합니다.

이 문제를 해결하는 방법을 모릅니다. 과거에 나에게 일어난 적이 없었습니다!

는

데모 : inline-block 요소 list-items입니다 당신 때문에 http://jsfiddle.net/EaAvx/

출처

2013-09-21 Alberto

사용자가 패딩을 클릭하면 링크가 이어 지도록 'a' 요소에 패딩을 설정하는 것이 좋습니다 (어쨌든 블록 요소로 만들었습니다). 이제는 사용자가 목록 항목의 패딩을 클릭하면 아무것도 수행되지 않습니다. –

@BramVanroy 예, 당신이 옳습니다, 고칠 것입니다, 고마워요. – Alberto

때문이다.

변경이에 HTML :

는 다음과 같은 솔루션의 사용 .. ..

<li class='active'><a href="/">Home</a></li><li><a href="/gallery/">Gallery</a></li><li><a href="/about/">About Me</a></li><li><a href="/contact/">Contact Me</a></li>

또는 마크 업에서 공백을 제거하는

<li class='active'><a href="/">Home</a></li><!-- 
--><li><a href="/gallery/">Gallery</a></li><!-- 
--><li><a href="/about/">About Me</a></li><!-- 
--><li><a href="/contact/">Contact Me</a></li>

공백을 제거하는 대신에 항상 공백을 제거 할 수 있습니다. 음의 여백 dd는 :

border-left: 1px solid #2d2d2d;
:

header nav ul li { 
    margin:0px -2px; 
}

또는 부모에 0 픽셀 수있는 font-size ..

참고 설정 때문에 당신의 CSS에서이의 1 픽셀의 격차는 여전히 존재

... 원한다면 '해킹'을 모두 피하고 inline-block에서 부동 요소로 변경하면됩니다.

출처

2013-09-21 14:56:21

이것은 완벽하게 잘 동작했지만 코드에서보기에는 좋지 않지만 중요하지는 않습니다. 필자는 인라인 블록 디스플레이의 이러한 특성을 인식하지 못했습니다. 감사. – Alberto

@Alberto 나는 대안을 추가했다. 여기에 더 많은 옵션이있다. http://css-tricks.com/fighting-the-space-between-inline-block-elements/ EDIT .. 기술적으로 화이트를 제거하는 나쁜 코드는 아니다. 공간 .. 실제로는 태그를 닫지 않거나 음수 여백을 사용하는 등 훨씬 더 나쁜 해결책이 있습니다. –

실제로 흥미로운 기사는 실제로 flexbox를 사용하면 많은 문제를 해결할 수 있고, 또한 더 쉽게 만들 수 있습니다 반응 형. – Alberto

li이 (가) 인라인 블록으로 설정 되었기 때문입니다.

설정이 :

nav > ul { 
    font-size:0; 
} 

nav li { 
    font-size:16px; 
}

그리고 다.

출처

2013-09-21 14:58:00

그런 식으로 글꼴 크기를 ems로 선언 할 수 없다. – Alberto

인라인 블록을 해킹하는 영리한 방법. 나는 이것을 기억해야 할 것이다. –

예, 단점이 있습니다. –

당신은 이런 것을 고칠 수, 여기에 FIDDLE

header nav ul li { 
    float: left; 
    list-style: none; 
    line-height: 150px; 
    padding: 0 20px; 
    border-left: 1px solid #2d2d2d; 
}

출처

2013-09-21 14:59:25 mdesdev

사용은 패딩과 마진을 설정 사용하는 모든 선택의 상자 크기 조정

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding:0; 
    margin:0; 
}

데모 : http://jsfiddle.net/EaAvx/2/

출처

2013-09-21 15:01:00