0

有人要求我改进他的 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;
    }

为什么这个菜单不能一直居中？

4

3 回答 3

2

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

于 2012-12-18T18:48:14.780 回答
0

您需要将菜单放入包装容器中。给它一个宽度并设置边距：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;
}
于 2012-12-18T18:57:50.023 回答
0

那是你要的吗？jsfiddle

  1. 菜单在弓形器中对齐。
  2. 菜单项不会进入第二行。

如果是这样，解决方案是

你必须使用 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>

​​​​​​​​​​​​​​​</p>

并为您的菜单 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;
    }

​</p>

于 2012-12-18T19:03:20.833 回答