css - 导航列表未正确居中

Question

我目前正在学习如何编写 Wordpress 主题代码，但我无法将导航菜单居中。它向右移动太远。我附上了一张图片来说明我所提供的代码存在的问题。

这里是问题截图的链接:http://i59.tinypic.com/8z1m2o.png

body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}

a:link,
a:visited {
    color: #000;
    text-decoration: none;
}

p {
    line-height: 14px;
}

/* General Layout */
div.container{
    max-width: 960px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

article.post {
    border-bottom: 1px solid #bbbbbb;
}

article.post:last-of-type{
    border-bottom: none;
}

/* Header */
.site-header {
    border-bottom: 2px solid #999;
    padding-top: 10px;
}

/* Footer */
.site-footer {
    margin-top: 0px;
    border-top: 2px solid #999;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation */
.site-nav {
    position: fixed;
    left:50%;
}

.site-nav ul{
    background-color: rgba(255,255,255,0.8);
    padding: 0px;
    margin: 0px;
}

.site-nav ul li{
    text-align: center;
    display: inline-block;
    overflow:hidden;
    text-decoration: none;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #DDD;
}

.site-nav ul li:last-of-type {
    border-right: none;
}

Answer 1

.site-nav 具有 position: fixed, left: 50% 因此元素的左侧将位于屏幕中间。如果必须使用固定定位，请删除此规则或提供元素 margin-left: -X，其中 X 等于 .site-nav 宽度的一半。