文字不在导航栏中居中显示/导航栏文字之间的空间太大

Question

我在这里拥有我的网站： http : //gyazo.com/56e069ebf8b5bd61ee30523886180b88

导航栏存在许多问题。

1，您可以看到文本或导航栏不是水平居中，如悬停所指示（顶部和底部相等）

2）文本之间有很大的间隔（并且这种间隔是我发现作品突出显示或悬停时文本不会四处移动的唯一方法。

因此，对于1.，有没有一种方法可以使文本或导航栏（不确定是什么原因）居中，从而使悬停看上去（在水平方向）更加平等

对于2。是否有一种方法可以缩小文本之间的间距，同时仍保持相同的填充设置，因此在使用悬停功能时它不会移动文本。

如果有帮助，我还添加了一个jsfiddle： http : //jsfiddle.net/d1a5eshs/

HTML导航栏

<!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><br><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><br><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>

                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul

导航栏CSS

/*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 
    height:45px;
    }         
#nav_bar ul li {
    display: inline-block;    
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    margin-left:10px;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;
    margin-bottom:30px;
}
#nav_bar ul li ul {
    display: none;   
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding-bottom:13px;
    padding-top:13px;
    padding-left:10px;
    padding-right:10px;   
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#c9c9c9;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;      
}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    padding: 0px;
    background: #e2e2e2;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:10px;
    border: 1px solid black;
    border-radius:5px;
}
#nav_bar ul li:hover ul li {
    display: block;

}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:12px;
    font-weight:bol;
    margin-left:-20px;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
}

Answer 1

有几个间距问题，也有几个duplicate styles和一些错误，但我想我已解决了所有问题。 http://jsfiddle.net/d1a5eshs/1/ 。

Answer 2

这是我的导航栏版本： http : //jsfiddle.net/zo541am2/ 。 我修剪并简化了您的HTML和CSS代码。

HTML：

<nav>
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="status.html">STATUS</a></li>
        <li><a href="info.html">INFO</a></li>
        <li><a href="#">GAMEMODES</a>
            <ul>
                <li><a href="survival.html">SURVIVAL</a></li>
                <li><a href="pure-pvp.html">PURE-PVP</a></li>
                <li><a href="gamesworld.html">GAMESWORLD</a></li>
            </ul>
        </li>
        <li><a href="rules.html">RULES</a></li>
        <li><a href="vote.html">VOTE</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
</nav>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

nav {
    background-color: #a22b2f;
    box-shadow: 0px 2px 10px;
}

ul {
    list-style-type: none;
}

nav > ul {
    display: table;
    margin: 0 auto;
    min-width: 650px;
    text-align: center;
}

nav > ul > li {
    display: inline-block;
    position: relative;
}

nav > ul > li > a {
    display: block;
    color: #fff;
    text-decoration: none;
    font: bold 15px/3 Serif;
    padding: 0 15px;
}
nav ul ul {
    display: none;
    position: absolute;
    min-width: 100%;
    background: #e2e2e2;
    border: 1px solid gray;
    border-radius: 2px;
}

nav > ul > li:hover > a {
    background: #8c1b1f;
}

nav ul ul li a {
    display: block;
    color: black;
    font: bold 12px/3 Sans-Serif;
    text-decoration: none;
}

nav ul ul > li:hover > a {
    background: #c9c9c9;
}

nav > ul > li:hover > ul {
    display: block;
}