내 탐색 막대에 단추를 가운데 놓을 수있는 방법은 무엇입니까?

Question

<div id="navbar"> 
    <ul> 
     <li id="nav"> 
      Home 
     </li> 
     <li id="nav"> 
      HTML/CSS 
     </li> 
     <li id="nav"> 
      PHP/MySQL 
     </li> 
     <li id="nav"> 
      Contact 
     </li> 
    </ul> 
</div> 

이것은 내 탐색 바에 현재 사용중인 모든 HTML입니다. CSS는 다음과 같습니다.

#bar { 
    height: 3px; 
    width: auto; 
    background: rgb(100,100,100); 
    margin-left: -10px; 
    margin-right: -10px; 

} 


#navbar { 
background: rgba(125,125,125,0.5); 
width: auto; 
height: 20px; 
padding: 10px; 
padding-left: 80px; 
margin: -10px; 
} 


li#nav:hover{ 
    background: blue; 
    cursor: pointer; 
    box-shadow: 0px 0px 10px #FFFFFF; 
} 

ul { 
    list-style-type: none; 
    display: block; 
} 

li#nav { 
    width: 100px; 
    height: 20px; 
    background: black; 
    color: white; 
    text-align: center; 
    float: left; 
    padding: 10px; 
    margin-top: -26px; 
} 

단추를 중앙에 놓을 수 없습니다. 디스플레이를 시도했습니다 : 인라인 및 블록 인라인을 차단하고 다른 사람들이 사용하는 것과 같은 작업을하지 않습니다. 그것은 현재 다음과 같습니다

http://i.gyazo.com/ad8ca7626594348dc1141bcbea8079d2.png

나는 버튼 사이의 간격을 조금 싶습니다하지만 약간의 여백이 용이해야한다.

Answer 1

이 시도 :

<style> 
html, body{ 
    padding: 0; 
    margin: 0; 
} 

#navbar { 
    background: rgba(125, 125, 125, 0.5); 
    width: auto; 
    height: 40px; 
    text-align: center; 
} 
li#nav:hover { 
    background: blue; 
    cursor: pointer; 
    box-shadow: 0px 0px 10px #FFFFFF; 
} 
ul { 
    list-style-type: none; 
    display: block; 
    padding: 0; 
    margin: 0; 
} 
li#nav { 
    width: 100px; 
    height: 20px; 
    background: black; 
    color: white; 
    text-align: center; 
    display: inline-block; 
    padding: 10px; 
} 
</style> 
<div id="navbar"> 
    <ul> 
     <li id="nav">Home</li> 
     <li id="nav">HTML/CSS</li> 
     <li id="nav">PHP/MySQL</li> 
     <li id="nav">Contact</li> 
    </ul> 
</div> 

여기를 체크 아웃 : jsFiddle

Answer 2

은 다음과 CSS를보십시오 : 여기

#bar { 
    height: 3px; 
    width: auto; 
    background: rgb(100,100,100); 
    margin-left: -10px; 
    margin-right: -10px; 

} 

#navbar { 
background: rgba(125,125,125,0.5); 
width: auto; 
height: 20px; 
padding: 10px; 
padding-left: 80px; 
margin: -10px; 
} 


li#nav:hover{ 
    background: blue; 
    cursor: pointer; 
    box-shadow: 0px 0px 10px #FFFFFF; 
} 

ul { 
    margin: 0 auto; 
} 

li#nav { 
    width: 100px; 
    height: 20px; 
    background: black; 
    color: white; 
    text-align: center; 
    float: left; 
    padding: 10px; 
    margin-top:-10px; 
} 

는 example입니다.