CSS 인라인 목록 여백

Question

div의 전체 너비를 "채우기"위해 노력하고있는 인라인 목록이 있습니다.

목록에서 margin-right를 사용하는 경우 마지막 요소는 div의 끝에 도달하지 않거나 (오른쪽 여백을 가졌기 때문에) 오른쪽 마진에 따라 초과 할 때 다음 행으로 이동하게됩니다 div의 폭

여기에 제가 설명하는 예제가 있습니다.

http://i.imgur.com/9CJx7.png

내 HTML :

<div id="footerstick" style="background:url(site_files/bg_shears.png) repeat-x; "> 
    <div id="footer_wrap"> 
     <div id="footer_top_shelf"> 
      <ul> 
       <li>Contact Us</li> 
       <li>FAQ</li> 
       <li>About Us</li> 
       <li>Distribution</li> 
      </ul> 
     </div> 
    </div> 

</div> 

내 CSS :

#footerstick { 
    position: relative; 
    margin-top: -230px; /* negative value of footer height */ 
    height: 230px; 
    clear:both; 
    } 
#footer_wrap {width:980px; margin:auto;}  
#footer_top_shelf {height:70px; overflow:hidden; } 
#footer_top_shelf ul li {display:inline; list-style:none; color:#c7c7c7; font-size:30px; margin-right:85px; line-height:75px; text-transform:uppercase; font-family:myriad pro; } 

Answer 1

쓰기 같은 :

#footer_top_shelf ul li + li{ 
    margin-left:85px; 
} 

Answer 2

CSS를 아래에보십시오 - 당신의 이미지를 본 후와 같이 귀하의 요구에 따라 멘토, 만약 당신의 문제가 바로이 업데이트 된 CSS가 당신을 도울 것입니다.

#footerstick { 
    position: relative; 
    margin-top: -230px; /* negative value of footer height */ 
    height: 230px; 
    clear:both; 
    } 
#footer_wrap {width:980px; margin:auto;}  
#footer_top_shelf {height:70px; overflow:hidden;} 

#footer_top_shelf ul 
{ 
    margin:0; 
    padding:0; 
    text-align:center; 
} 

#footer_top_shelf ul li { 
display:inline; 
list-style:none; 
color:#c7c7c7; 
font-size:30px; 
margin:0px 40px; 
line-height:75px; 
text-transform:uppercase; 
font-family:myriad pro; 
} 

참고 : 실시간 코드를 표시 할 수 있으므로 코드가 작동하는 방식과 문제가있는 곳을 쉽게 식별 할 수 있습니다.