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

大家好，我正试图在我的

wordpress

网站的导航菜单中定位一个搜索框。我使用名为

搜索框导航

的插件将其显示在菜单中。这个插件使我能够根据自己的需要设计盒子的样式

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

负责生成位于

插件

文件中的框的代码：（我在

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

这是我的

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

---

关于如何将此框定位到导航的最右侧，但在浏览器较小时进行调整，有什么帮助吗？

我注意到导航的每个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;
}

---

您可以使其流动，并将宽度设置为%以及可能需要的导航li的不同百分比。

不需要为此使用插件，只需将搜索框代码添加到导航

ul

之后的标题中，然后限制

ul

的宽度，并将搜索框浮动到右侧。I wait’我正在尝试这样做，但我使用了一个名为

tempera

的主题，nav是使用一个名为

cryout\u access\u hook

的主题挂钩生成的。我似乎在任何地方都找不到这个挂钩，我已经在整个项目中搜索了它的出现，而且找不到它……从header.php的

第40行开始就是nav code、 只需将搜索框代码放在关闭
后的
第42行
上，然后您就可以在CSS文件中设置它的样式（您必须在
nav
上设置一个宽度，以防止它跨越100%的容器宽度）。这很有效。谢谢检查我的答案是否有效
#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;
}