작은 흰색 공백 사이의 항목

-1

나는 4 <li> 항목으로 구성된 아주 간단한 navbar 인덱스를 가지고있다. 나는 적절하게 모든 것을 스타일링하고, 뒤돌아 보았고, 모든 것이 그것이 있어야하는 방식인지 확인했다.작은 흰색 공백 사이의 항목

그러나 아무 이유없이 모든 <li> 항목 사이에 작은 공백이 표시됩니다.

이

은 현재 모습입니다 같은 :

이 원하는 결과입니다

그물에 수정 사항이있을 것 같지 않습니다는 (또는 적어도 내가 찾을 수있는 것들). 모든 도움에 감사드립니다

/* relevant css */ 
 

 
.index-navigation { 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 45px; 
 
} 
 
.index-navigation ul li { 
 
    display: inline-block; 
 
    width: 120px; 
 
    padding-top: 13px; 
 
    padding-bottom: 10px; 
 
    background-color: #000; 
 
    text-align: center; 
 
} 
 
.index-navigation ul li a { 
 
    color: #FFF; 
 
    font-size: 1.2em; 
 
    font-family: helvetica; 
 
    text-decoration: none; 
 
}

<!-- relevant HTML !--> 
 

 
<div class="index-navigation navigation-scroll"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">HOME</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">FEATURED</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">FORUMS</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">SUPPORT</a> 
 
    </li> 
 
    </ul> 
 
</div>

건배

출처

2016-07-04 GROVER.

http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-에 대한 inline를 넣어 between-these-inline-block-div-elements –

@NenadVracar는 내가 이것을 게시하기 직전에 이것을 확인했다. 그 솔루션들 중 어느 것도 나를 위해 일하지 않았다. –

플로트 추가 : 아래의 스타일 왼쪽

이 내 CSS와 HTML입니다.

.index-navigation ul li { 
    display: inline-block; 
    width: 120px; 
    padding-top: 13px; 
    padding-bottom: 10px; 
    background-color: #000; 
    text-align: center; 
    float: left; 
}

출처

2016-07-04 11:51:38 Nehemiah

흠, 그건 이상하다. t에는 공백이 있습니까? –

인라인 블록 속성은 코드의 줄 바꿈을 해석하지 않습니다. <li>의 모든 줄 바꿈이 렌더링된다는 것을 의미합니다. 이것은 볼 수있는 공간입니다.

하나의 트릭은 공백을 제거하고 html 형식을 유지하기 위해 이와 같이 주석을 추가하는 것입니다.

<div class="index-navigation navigation-scroll"> 
    <ul> 
    <li> 
     <a href="#">HOME</a> 
    </li><!-- 
    --><li> 
     <a href="#">FEATURED</a> 
    </li><!-- 
    --><li> 
     <a href="#">FORUMS</a> 
    </li><!-- 
    --><li> 
     <a href="#">SUPPORT</a> 
    </li> 
    </ul> 
</div>

출처

2016-07-04 11:53:38 PIIANTOM

하하, 아주 이상합니다! 답변 해주셔서 감사합니다 :) –

inline-block를 제거하고 li

/* relevant css */ 
 

 
.index-navigation { 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 45px; 
 
} 
 
.index-navigation ul li { 
 
    display: inline; 
 
    padding-left: 10px; 
 
    padding-right:10px; 
 
    width: 120px; 
 
    padding-top: 13px; 
 
    padding-bottom: 10px; 
 
    background-color: #000; 
 
    text-align: center; 
 
    margin:none; 
 
} 
 

 
.index-navigation ul li a { 
 
    color: #FFF; 
 
    font-size: 1.2em; 
 
    font-family: helvetica; 
 
    text-decoration: none; 
 
}

<!-- relevant HTML !--> 
 

 
<div class="index-navigation navigation-scroll"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">HOME</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">FEATURED</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">FORUMS</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">SUPPORT</a> 
 
    </li> 
 
    </ul> 
 
</div>

출처

2016-07-04 11:55:07

작은 흰색 공백 ​​사이의 항목

답변

관련 문제

작은 흰색 공백 사이의 항목