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;
}
?>

这是我的navigation 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

我注意到为导航器的每个li设置了相同的宽度（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/

你可以使它变得流畅，并以％表示宽度，使用不同百分比的导航器可能需要它。

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

1 个答案: