我的css导航菜单拒绝以浏览器为中心?

时间:2011-06-21 23:53:51

标签: css navigation centering

我已经尝试了所有的地方

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;
}

P.S。我拿出了我的评论和任何非必要的代码,我意识到我用长手写的CSS,但我喜欢这样做; - )

2 个答案:

答案 0 :(得分:4)

它没有显示居中的原因是因为持有菜单的ul没有指定宽度;因此,它的渲染宽度为100%;换句话说,左/右边距处于自动状态不起作用。

尝试将text-align: center添加到ul,以便内联的li能够居中。

答案 1 :(得分:1)

最简单的方法是在顶级<ul>添加宽度,例如:

ul {
    height: auto;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    width:80%;
    text-align:center;
}

编辑抱歉,我误解了这个问题,我认为只是希望整个菜单不会跨越窗口的整个宽度,而不是将菜单内容居中。已添加text-align:center;作为@Jacob已建议的答案。