0

私はこのjsfiddleを持っており、navアイテムが左に整列していることがわかります。ユーザーがログインしたときにもう1つのナビゲーションアイテムがあるので、ナビゲーションアイテムに関係なく、これらのアイテムを中央に配置する方法はありますか...任意のアイデア

これが私のhtmlです

<div id="cssmenu">
<ul>
  <li><a href="#"><span>Home</span></a></li>
  <li class="has-sub "><a href="#"><span>Products</span></a>
     <ul>
        <li class="has-sub "><a href="#"><span>Product 1</span></a>
           <ul>
              <li><a href="#"><span>Sub Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
        <li class="has-sub "><a href="#"><span>Product 2</span></a>
           <ul>
              <li><a href="#"><span>Sub Product</span></a></li>
              <li><a href="#"><span>Sub Product</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
 </ul>
 </div>​
4

4 に答える 4

2 
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: -50%;  <--- here
}

それをしているようです。

于 2012-11-10T03:15:13.613 に答える
2

メインにクラスを追加しますul：

<div id="cssmenu">
  <ul class="menu">
    ...

次にcssで：

ul.menu {
  position: relative;
  left: 50%;
}

そしてjQuery：

var $menu = $('ul.menu');
$menu.css('margin-left', -$menu.outerWidth() / 2 +'px' );​

デモ： http： //jsfiddle.net/elclanrs/4TcsP/1/

于 2012-11-10T03:15:31.007 に答える
2

あなたがあなたとを作りたいならli（display:blockおそらくあなたはそれらに同じ幅を与えたいでしょう）、あなたはrelativeポジショニングで正しい考えを得ました、ただ次のプロパティを追加してください：

#cssmenu ul {
    left: 50%;
}
#cssmenu ul li{
    right: 50%;
}

そうでない場合は、他のすべてのものを削除して、次のようにしliます。display:inline

#cssmenu { text-align: center; }
#cssmenu ul { list-style: none; }
#cssmenu ul li { display: inline; }
于 2012-11-10T03:26:46.627 に答える
0

メニューをインラインブロックとして表示し、＃cssmenu text-align：centerを設定します。

#cssmenu > ul {
  display: inline-block
}
#cssmenu {
  text-align: center;
}

PS：メニューコンテナにクラス名とメニュー項目を付けることをお勧めします。

于 2012-11-10T03:21:45.070 に答える