html - 在wordpress导航菜单中定位搜索表单

Question

大家好，我正在尝试在我的 wordpress 网站的导航菜单中放置一个搜索框。我已经设法使用名为 Search Box Navigation 的插件将其显示在菜单中。这个插件使我能够设计盒子的样式以满足我的需要。

然而，这是我遇到问题的地方。

负责生成位于 plugin 文件中的框的代码:(我向 li 添加了一个类，以控制它在网站上的显示方式...

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {

        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean();

        $items .= '<li class="menusearch">' . $searchform . '</li>';

    return $items;
}
?>

这是我的导航 html:

<nav id="access" role="navigation">
        <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
            <div class="menu">
                <ul id="prime_nav" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#.com"><span>Item 1</span></a></li>
                    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="http://#.com"><span>Item 2</span></a>
                    <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://#.com"><span>Item 3</span></a></li>
                    <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://#.com"><span>Item 4</span></a></li>
                    <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://incomebrokers.tld/93-2/"><span>Test</span></a></li>
                    <li class="menusearch"> 
                            <form method="get" id="searchform" action="http://incomebrokers.tld//">
                                <input type="text" value="Search"/>
                                <input type="submit" id="searchsubmit" value="Search" />
                            </form>
                    </li>
                </ul>
            </div>                            
    </nav>

这是我的css

#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}


/*Menu Search Class*/
.menusearch{
    margin-left:500px;
}

关于如何将此框定位到导航的最右侧但在浏览器尺寸较小时是否对其进行调整的任何帮助？

Answer 1

我注意到导航的每一里都设置了相同的宽度 (100px)。

如果您编辑 css 并添加:

#access ul li {
position:relative;
display:block;
float:left;
text-align: center;
width:100px;
white-space: nowrap;
}
#access ul li:last-child {
float:right;
width:300px;
}

http://jsfiddle.net/mBBJM/4537/

您可以使其流畅，并为可能需要它的导航的 li 设置不同百分比的宽度(以 % 为单位)。