Question

我有这个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>

Answer 1

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

好像是这样做的。

Answer 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/

Answer 3

如果你想让你的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; }

Answer 4

将菜单显示为内联块，并设置#cssmenu text-align：center。

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

PS：最好给菜单容器一个类名，以及菜单项。

我如何将这些导航项目居中？

4 个答案: