0

非管理者用の幅が 400 で、管理者用の幅が 500 の CSS メニューがあります。UL 幅を 500 に設定すると、メニューは管理者にとって適切に中央に表示されます。しかし、mneu の幅が実際には 400 しかない非管理者にとっては、調子が悪いのです。

そこで、UL から width 属性を削除してこれを削除しようとしたところ、センタリングが完全に失われました。メニュー全体がコンテナの左側にくっついています。

常に中央に配置する方法について簡単なアイデアを持っている人はいますか? サイトはこちら: http://www.runic-paradise.com/

ul.menu{
    height: 40px;
    list-style: none outside none;
    margin: 0 auto;
    /*width: 500px;*/
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a.menu{
    color:#FFF;
    text-decoration:none;
}

p.menu{
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 5px;
}

    .subtext{
    padding-top: 10px;

    }

ul.menu li{
    width: 100px;
    height: 40px;
    float: left;
    color: #191919;
    text-align: center;
    overflow: hidden;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('/img/menu/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('/img/menu/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('/img/menu/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('/img/menu/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('/img/menu/blue-item-bg.jpg') top left no-repeat;
}





<ul class="menu">
    <li class="green">
        <p class="menu"><a href="/" class="menu">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="yellow">
        <p class="menu"><a href="#" class="menu">-</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p class="menu"><a href="/forums/" class="menu">Forums</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p class="menu"><a href="#" class="menu">-</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
<?php
if ($user->data['group_id'] == 5)
{
   echo '   <li class="purple">
        <p class="menu"><a href="#" class="menu">Admin</a></p><p class="subtext">Legal things</p>
    </li>';
}

?>
</ul>
4

3 に答える 3

1

CSS はul.menu幅を 400px に設定します。ユーザーが管理者の場合、php スクリプトは別の 100px 幅の li を に追加しul.menuます。この場合、ul.menu幅を 500px に設定する必要があります。これを行うと、css ルールmargin:0px auto;は期待どおりにセンタリングを処理します。

簡単な jQuery の修正は次のようになります。

<script>
$(document).ready(function() {
    var menu=$('ul.menu');
    if(menu.find('li')>4) {
        //if there are more then 4 menu items, reset menu width to 500px
        menu.css('width','500px');
    }
});
</script>
于 2013-11-02T13:15:29.173 に答える
0

ここに画像の説明を入力これを試してみませんか？

animation-menu.css (デモ URL: http://www.runic-paradise.com/ ) で、余白のスタイルを次のように変更します。

ul.menu {
  height: 40px;
  list-style: none outside none;
  margin: auto 25%;
}
于 2013-11-02T12:38:01.150 に答える