我想设置水平Wordpress主菜单的样式，以便前3项向左对齐，后3项向右对齐。
这将创建两个菜单的外观（右侧有登录名等），但可以轻松地重新设置样式，以创建一个底部有最后三个项目的响应菜单。
菜单：
<UL>
<li>1a</li><li>2a</li><li>3a</li> <-left right-> <li>4a</li><li>5a</li><li>6a</li>
</UL>
使用float left和right会导致最后3项改变顺序，我需要它们保持顺序。
我想要一个解决方案，它不需要创建单独的菜单或更改菜单项的顺序来进行浮动：右按正确的顺序将它们放回原位。
我尝试过各种显示组合：内联块和文本对齐：左/右，但运气不佳。
编辑：我希望在不向菜单本身添加标记的情况下执行此操作。（除非答案还说明了如何将标记添加到Wordpress水平菜单中。）
最合适的回答,由SO网友:cfx 整理而成
有一种更简单的方法，无需更改标记和最小化CSS。Live demo/fiddle here, 代码如下：
<ul>
<li>1a</li><li>2a</li><li>3a</li><li>4a</li><li>5a</li><li>6a</li>
</ul>
<小时>
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: right;
}
li {
float: left;
}
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
float: none;
display: inline-block;
}
SO网友:tao
您需要将两个组（左对齐和右对齐的项目）包装在两个容器中。您比设置float left, 分别地right 在那些容器上。
<UL>
<div class="pull-left"><li>1a</li><li>2a</li><li>3a</li></div>
<div class="pull-right"><li>4a</li><li>5a</li><li>6a</li></div>
</UL>
确保内部元素
display 设置为
inline-block. 您还需要设置
overflow 的属性
ul 元素设置为“hidden”，以确保它扩展到包含所有子元素，因为两者都是浮动的。
.pull-left { float: left; }
.pull-right { float: right; }
.pull-left li, .pull-right li { display: inline-block; }
ul { overflow: hidden; }
设置
overflow: hidden 对于所有
ul 项目中的元素可能不是一个好主意，因此您可能希望找到
ul 并将其添加到
ul 选择器。（例如：
.some-container-class-here ul { overflow: hidden;} )
