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. メニュー項目は 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 に答える