Question

我想将单个菜单项置于此水平CSS菜单中（从purecssmenu.com获取）。

他们目前浮在左边，我希望他们居中

<div class="wrapper">
    <ul class="pureCssMenu pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu1</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Submenu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="pureCssMenum">
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu3</a></li>
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu4</a></li>
                <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu5</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu3</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu2</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu4</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu5</a></li>
    </ul>
</div>

此JsFiddle提供完整的HTML标记和CSS http://jsfiddle.net/28X9v/

解决方案应该是跨浏览器兼容的，并且至少应该在ie7 / 8

中工作

Answer 1

从li's： Demo

中删除浮动广告

ul.pureCssMenu, ul.pureCssMenu ul {text-align:center;}
ul.pureCssMenu li { display:inline-block;}

Answer 2

嘿，查看测试此代码

.pureCssMenum li > ul.pureCssMenum li{
  float: left;
 }
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenum{

   position:absolute;
     top:40px;
  }
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenui li{
   float:none;
   position:relative;

 }

http://jsfiddle.net/kisspa/LdXU5/

Answer 3

对您的css进行以下更改

增加子菜单宽度以适应右移

ul.pureCssMenu ul {
    width:110px;
}

并更改边距值以将菜单项移至右侧

ul.pureCssMenu li {
    display:block;
    margin:2px 0px 2px 18px;
    font-size:0px;
}

您可以更改margin属性的最后一个参数，以便将元素更多地向右移动。

这里是小提琴http://jsfiddle.net/28X9v/3/

Answer 4

我认为这是你想要的答案。

http://jsfiddle.net/28X9v/5/

<span>....</span>

用于代码中的对齐。就是这样。

将单个菜单项置于水平菜单中心

4 个答案: