我的CSS导航菜单拒绝在浏览器中居中?

| 我尝试了所有放置的地方
margin-right: auto
margin-left:auto
指某东西的用途
display: inline-block
在实际的链接上效果很好,但是如果添加为父项,则菜单会混乱。 我觉得,为了使其在浏览器视口中居中,我将需要失去一些样式。我觉得样式的某些方面在防止居中方面存在冲突。 我希望我错了,而且有人的建议是可能的... 亲切的问候, 戴尔 这是我的CSS:
.navigation {
    height: auto
    width: 96%;
    border-top-color: rgb(119,120,122);
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-color: rgb(119,120,122);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-top: 1%;
    margin-right: auto;
    margin-bottom: 1%;
    margin-left: auto;
    padding-top: 1%;
    padding-bottom: 1%;
    background-color: transparent;
    background-image: none;
}

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
}

ul li {
    display: inline;
}

ul li ul {
    display: none;
}

ul li:hover ul {
    height: auto;
    width: 96%;
    display: block;
    position: absolute;
    margin-right: auto;
    margin-left: auto;
}

ul li a {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 0.15%;
    margin-bottom: -0.2%;
    padding-top: 1.25%;
    padding-right: 1.4%;
    padding-bottom: 1.25%;
    padding-left: 1.4%;
}

ul li:hover ul a {
    margin-right: -0.2%;
    margin-bottom: 0;
}
附言我拿出了我的注释和所有非必需的代码,我意识到我是用长CSS写的,但是我喜欢这样做;-)     
已邀请:
        之所以不能居中显示,是因为没有显示菜单中的
ul
。因此,它以100%的宽度进行渲染;换句话说,左/右页边距处于自动状态不起作用。 尝试在
ul
上加上
text-align: center
,以便内嵌的ѭ7line能够居中。     
        最简单的方法是在顶层
<ul>
处添加宽度,例如:
ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    width:80%;
    text-align:center;
}
编辑:对不起,我读错了问题,我想您只是希望整个菜单不跨越窗口的整个宽度,而不是将菜单内容居中。在我的答案中加上了
text-align:center;
,因为@Jacob已经建议了。     

要回复问题请先登录注册