Как я могу центрировать кнопки в моей навигационной панели?

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.