html - 如何让基于 CSS 的导航栏居中？

Question

我有一个 CSS <li>基于导航栏的样式和实现如下:

CSS:

DIV.topbar_outer {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height:33px;
    /*background-color: #202020;*/
}

DIV.topbar_inner {
    /*font info*/
    text-align: center;
    padding-top: 8px;
    /*layout*/
    position: absolute;
    left: 50%;
    width: 900px;
    height: 25px;
    margin-left: -450px;
    background-color: #202020;
}

/*Navigation bar format styling*/
.navigation_bar {
    border: 0px;
    margin-top: 0px;
}

.navigation_bar li {
    display: inline;
    list-style: none;
    padding-right: 10px;
    padding-left: 10px;
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

/*Navigation bar link styling*/
.navigation_bar li a {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FF0000; font-size: 13px;
}
.navigation_bar li a:hover {
    text-decoration: none; font-family: 'Raleway', sans-serif; font-weight: 700; color: #FFFFFF; font-size: 13px;
}

HTML:

<div class="topbar_outer">
    <div class="topbar_inner">
        <ul class="navigation_bar">
            <!-- Navigation bar items -->
            <li>
                HOME
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PHOTOS</a>
            </li>
            <li>
                <a href="#">DINING</a>
            </li>
            <li>
                <a href="#">FUNCTIONS</a>
            </li>
            <li>
                <a href="#">CLUB EVENTS</a>
            </li>
            <li>
                <a href="#">BOWLS NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</div>

我似乎对 topbar_inner 中的列表项居中有疑问容器，如下所示:

该列表似乎大部分居中，但偏向右侧一点点，足以引起注意。

谁能提供导航列表绝对水平居中的解决方案？

Answer 1

您的 ul 有一个浏览器自动应用的左填充。只需删除它，一切都会居中。

只需添加 padding: 0; 如下所示:

.navigation_bar {
    border: 0px;
    margin-top: 0px;
    padding: 0;
}