WordPress自定义菜单小工具样式

时间:2012-11-09 作者:Danny

我想知道是否有人知道将1个自定义菜单小部件(位于我的网站页脚)拆分为2列的最佳方法。总共有8个链接,所以我想把它分成2列,共4个链接。不确定是否有此功能,或者是否有一些CSS来实现此功能?小部件中的HTML标记如下所示:

<ul>
    <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-133">
        <a href="#">Link</a>
    </li>
</ul>
对行项目代码重复该结构7次以上。

3 个回复
最合适的回答,由SO网友:totels 整理而成

纯粹使用CSS,您可以设置菜单项的宽度,使其浮动,然后将UL设置为两倍:

footer ul {
    width: 200px;
}
footer .menu-item {
    float: left;
    width: 100px
}
(我不知道您使用什么元素来指定页脚,您需要更新它以匹配您的结构。)

SO网友:brasofilo

您可以在中的自定义导航菜单中为菜单项指定单个CSS类http://example.com/wp-admin/nav-menus.php.

因此,前4个链接将具有widget-left-column 类和其他widget-right-column.
这样您就可以使用CSS将小部件分为两列了(严格的CSS问题在WordPress StackExchange中是无关紧要的)。

将CSS类分配给各个自定义导航菜单项,而不是重复相同的屏幕截图,我将在这里复制@JeremyJared\'s answer 对于类似的问题:

First, go to the screen options and select the css checkbox:

enable navigation menu classes

Next, open the menu item and give it a class. In my example it would have the class .home-page:

navigation menu class

请注意,要分配多个类,必须使用空格分隔它们
navigation menus multiple classes
生成以下Html:
enter image description here

SO网友:user57429

Simpler is

footer .menu-item {
   width:50%;
   float: left;
 }
结束