Question

有人要求我改进他的CSS以防止导航菜单在浏览器变小时改变位置，但我无法弄清楚为什么它不起作用。请参阅jsFiddle：http://jsfiddle.net/gtvTY/10/

HTML：

<div id="menu">
    <ul>
        <li><a href="index.html" title="Home">HOME</a></li>
        <li><a href="virage.html" title="Virage">VIRAGE</a></li>
        <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
        <li><a href="dbs.html" title="DBS">DBS</a></li>
        <li><a href="db9.html" title="DB9">DB9</a></li>
        <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
    </ul>
</div>

这是原始菜单：

        ul.menu {
        position:absolute;
        left:18%;
        right:18%;
        background: #333;
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 64%;
        z-index: 3;
    }
    ul.menu li {
        float: left;
        margin: 0;
        padding: 0;
    }
    ul.menu a {
        background: #333;
        color: #ccc;
        display: block;
        float: left;
        margin: 0;
        padding: 8px 12px;
        text-decoration: none;
    }
    ul.menu a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 8px;
    }

我已经为此重新设计了一下。但它根本不起作用......

#menu ul {
        position: absolute;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #menu li
    {
        float: left;
        margin: 0 0.15em;
    }

    #menu li a
    {
        background-color: #333;
        height: 2em;
        line-height: 2em;
        float: left;
        width: 9em;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    #menu ul a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 2px;
    }

为什么此菜单始终不居中？

Answer 1

也许你正在寻找这样的东西 - 评论中的jsFiddle

Answer 2

您需要将菜单放在包装容器中。给它一个宽度并设置边距：0 auto;

请参阅此处的小提琴：http://jsfiddle.net/AndrewHenderson/gtvTY/7/

HTML：

<div class="container">
    <div id="menu">
        <ul>
            <li><a href="index.html" title="Home">HOME</a></li>
            <li><a href="virage.html" title="Virage">VIRAGE</a></li>
            <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
            <li><a href="dbs.html" title="DBS">DBS</a></li>
            <li><a href="db9.html" title="DB9">DB9</a></li>
            <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
        </ul>
    </div>    
</div>

CSS：

.container{
    margin: 0 auto;
    width: 800px;
}

Answer 3

这就是你想要的吗？ jsfiddle

菜单慢跑在bowoser中对齐。
菜单项不会出现在第二行。

如果是这样，解决方案是

你必须使用position：relative;而不是位置：绝对;

<div class="center">
 <div id="menu">
    <ul>
        <li><a href="index.html" title="Home">HOME</a></li>
        <li><a href="virage.html" title="Virage">VIRAGE</a></li>
        <li><a href="rapide.html" title="Rapide">RAPIDE</a></li>
        <li><a href="dbs.html" title="DBS">DBS</a></li>
        <li><a href="db9.html" title="DB9">DB9</a></li>
        <li><a href="cygnet.html" title="Cygnet">CYGNET</a></li>
    </ul>
</div>

并为菜单css定义宽度

.center
{
 width:auto;   
}
#menu
{
width:900px;
margin:0 auto;
position:relative;

}
#menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #menu li {
        float: left;
        margin: 0 0.15em;
    }

    #menu li a {
        background-color: #333;
        height: 2em;
        line-height: 2em;
        float: left;
        width: 9em;
        display: block;
        color: #fff;
        text-decoration: none;
        text-align: center;
    }

    #menu ul a:hover {
        background: #666;
        color: #fff;
        padding-bottom: 2px;
    }

CSS阻止菜单改变位置

3 个答案: