通过css在Wordpress中拆分菜单并重新排序右侧部分答案

【问题标题】：Split Menu in Wordpress via css and reorder right side section通过css在Wordpress中拆分菜单并重新排序右侧部分
【发布时间】：2013-10-10 05:44:36
【问题描述】：

我想知道是否有更优雅的方式来执行以下操作。

基本上，我有一个由 Wordpress 输出的标准水平主菜单。我想做的是向左浮动一半，向右浮动一半，并在中间放一个标志。为此，我为每个 li 附加了一个自定义类（通过 wordpress 菜单面板），如下所示。

    .menu-li-left {
    float: left;
    }

   .menu-li-right {
    float: right;
    }

但是，右边当然是相反的顺序。为了捏造它，我已经使用类似“right: -9% and right: 9%”的东西对每个菜单项重新排序（我在右侧只有 3 个菜单项）。它似乎工作，甚至响应，但这不是很优雅。

任何人都可以通过 CSS 提出一个更优雅的解决方案，我应该尝试一下，还是仅靠 CSS 不可能做到这一点？

谢谢

【问题讨论】：

您可以控制 wordpress 中的菜单顺序。为什么不在菜单编辑器中反转最后 3 个？
这是一个响应式网站。这也将扭转平板电脑和手机的顺序。对于移动设备，它会更改为下拉菜单之类的 boostrap。这是一个基于 bootstrap 的主题。
你也可以只做一个移动菜单
我会将徽标添加到菜单中。给它一个额外的 css 类，让它看起来不一样。这样您就可以使所有链接居中以在两侧创建一致的外观
嘿 Janw，这是一个有趣的想法。我可以在中间的 li 中添加徽标，然后在左右添加填充以根据需要进行间隔。我需要看看我是否可以通过使用 Wordpress 输出菜单的方式来做到这一点。

【解决方案1】：

好吧，我认为最好的解决方案是简单地添加自定义类以填充到图像左侧和右侧的 li 元素。很简单。我一直在想只是把 li 左右浮动。

对于将 UL 定位在包含浮动元素的中心，下面的帖子非常有帮助。

【讨论】：