0

我有这个jsfiddle,您可以看到导航项与左侧对齐。有没有办法让这些项目居中而不考虑导航项目,因为当用户登录时我会有一个更多的导航项目......任何想法

这是我的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

将一个类添加到您的 main 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

如果你想让你的和lidisplay: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

使菜单显示为 inline-block,并设置#cssmenu text-align: center。

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

PS:最好给你的菜单容器一个类名,以及菜单项。

于 2012-11-10T03:21:45.070 回答