목록의 요소 사이에 공백을 제거하는 방법은 무엇입니까?

Question

목록의 요소 사이에 공백을 제거하고 싶습니다. 전체 목록을 인라인으로 입력하면이 작업을 수행 할 수 있지만 그 작업은 읽기가 매우 어렵습니다.

이것은 내가 가지고있는 것인데, 나는 그들이 서로에 대해 물결 치고 싶습니다.

a http://i47.tinypic.com/1445wuo.jpg

는

<div id="navBar"> 
    <ul> 
     <li><a href="/" class="home">HOME</a></li> 
     <li><a href="/">ROOMS</a></li> 
      <!-- <ul> 
       <li>Test</li> 
      </ul> --> 
     <li><a href="/profiles/" class="end">PROFILES</a></li> 
    </ul> 

     <!-- stuff --> 
</div> 

CSS :

#navBar { 
display: inline-block; 
height: 30px; 
margin: 0; 
padding: 0; 
border-top: 3px ridge #292929; 
} 

#navBar ul{ 
display: inline; 
list-style: none; 
margin: 0; 
padding: 0; 
font: 15px bold Arial; 
background: transparent; 
} 

#navBar ul li { 
padding: 0; 
display: inline; 
text-align: center; 

} 

#navBar ul li a{ 
display: inline-block; 
width: 110px; 
height: 23px; 
padding-top: 7px; 
text-decoration: none; 
color: White; 
border-right: 1px groove #292929; 
border-bottom: 1px groove #292929; 
background-color: #70797F; 
} 

그 페이지의이 부분에 관한이 그것에 대해 생각합니다.

감사합니다.

Answer 1

사용하면 요소 사이의 공간을 제거 할 수 있습니다 : "인라인 디스플레이"플로트 속성

확인이 http://jsfiddle.net/ckzmF/

#navBar ul li { 
    padding: 0; 
    text-align: center; 
    float:left; 
    /* display: inline; */ 
} 

Answer 2

li 왼쪽에 플로트하십시오.

#navBar ul li { 
    padding: 0; 
    display: inline; 
    text-align: center; 
    float: left; 
} 

jsFiddle

Answer 3

대신 "부동 소수점 왼쪽" . check this

#navBar ul li 
{ 
padding: 0; 
display: inline; 
text-align: center; 
float:left; 

} 

Answer 4

또한 여백 - 왼쪽 또는 -2px 왼쪽 패딩-(또는 맞는 다른 번호)