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

尝试以下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。

Answer 2

试试这个：

<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

如何将导航栏中的按钮居中？

2 个答案: