복잡한 CSS 탐색 오류

Question

이미지와 CSS를 사용하지 않고 탐색 버튼을 입력하면 꽤 복잡한 3D-ish를 만들려고합니다! 그 약간의 도전과 나의 배는 내가 사소한 문제를 만났던 것에 따라 근거를 뒀다.

오렌지색 배경색으로 단추를 채우고 싶지만 텍스트 주위의 배경이 채워진 것 같습니다. 누구나 왜 모든 공간을 채우지 않을지 알 수 있습니다.

감사합니다.

<div id="navigation"> 
    <ul> 
     <li><a href="#about">about</a></li> 
     <li><a href="#work">work</a></li> 
     <li><a href="#blog">blog</a></li> 
     <li><a href="#contact">contact</a></li> 
    </ul> 
</div> 

CSS

#navigation{ 
    position: relative; 
    top:20px; 
    display: inline-block; 
    vertical-align: top; 
    z-index: 99999; 
    background:rgba(0,0,0,0.07); 
    padding:6px 6px 11px 6px; 
    border-radius: 3px; 
    box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), 0px 1px 0px #fff; 
} 
#navigation ul{ 
    border-radius:3px; 
    box-shadow: 0px 5px 0px #c6412b;  
} 
#navigation ul li { 
    display: inline-block; 
    vertical-align: top; 
} 
#navigation ul li a { 
    background:#e9573f; 
    font-size:22px; 
    display: block; 
    color: #fff; 
    border-right:1px solid #d44a34; 
    border-left:1px solid rgba(255, 255, 255,0.2); 
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5); 
    border-bottom:1px solid rgba(255,255,255,0.2); 
} 

감사합니다! #navigation ul li a에서 #navigation ul

Answer 1

귀하의 <li> 요소에

Answer 2

이동은 background:#e9573f; 설정이 inline-block를 표시 할 수 있습니다. 따라서 요소 사이의 공백 (즉, 개행과 들여 쓰기 공간)은 버튼 사이의 공백으로 렌더링됩니다.

는 <li>의 사이의 공백을 제거 줄 바꿈을 제거하려면 :

<li><a href="#about">about</a></li><li><a href="#work">work</a></li><li><a href="#blog">blog</a></li><li><a href="#contact">contact</a></li> 

, 당신의 버튼에 더 많은 공간을 추가하려면 <li>의에 패딩을 추가하려면.

Answer 3

여기에 CSS를 적용하면 html을 수정할 필요가 없습니다. http://jsfiddle.net/hDVUE/1/

#navigation{ 
    position: relative; 
    top:20px; 
    display: inline-block; 
    vertical-align: top; 
    z-index: 99999; 
    background:rgba(0,0,0,0.07); 
    padding:6px 6px 11px 6px; 
    border-radius: 3px; 
    box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1), 0px 1px 0px #fff; 
} 
#navigation ul{ 
    float:left; 
    border-radius:3px; 
    box-shadow: 0px 5px 0px #c6412b;  
} 
#navigation ul li { 
    float:left; 
    vertical-align: top; 
} 
#navigation ul li a { 
    background:#e9573f; 
    font-size:22px; 
    display: block; 
    color: #fff; 
    border-right:1px solid #d44a34; 
    border-left:1px solid rgba(255, 255, 255,0.2); 
    text-shadow: 0px 1px 0px rgba(0,0,0,0.5); 
    border-bottom:1px solid rgba(255,255,255,0.2); 
}