如何將按鈕置於我的導航欄中？

-1

<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

我想要的按鈕之間的空間一點點，但應該是很容易與一些利潤。

來源

2014-09-24 Robbin Ploeger

你可以把它的代碼段（按Ctrl + M）？或者http://jsfiddle.net？ – LcSalazar 2014-09-24 17:06:38

試試這個：

<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

來源

2014-09-24 17:09:07

這很好，謝謝！你能解釋你做了什麼嗎？ – 2014-09-24 17:15:00

我把'文本對齊：中心'在導航欄div中心事情。然後，我從'float：left'更改爲'li＃nav'上的'display：inline'，因爲文本對齊僅適用於內聯元素。然後我刪除了一些填充和邊緣，只是搞砸了一些東西。 – 2014-09-24 17:17:00

@caeth ID是唯一的，你應該使用類而不是id的，因爲你可以在多個元素上使用同一個類。 - http://css-tricks.com/the-difference-between-id-and-class/ – Anonymous 2014-09-24 17:18:21

嘗試下面的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。

來源

2014-09-24 17:07:06

如何將按鈕置於我的導航欄中？

回答

相關問題