Question

我正在使用wordpress，并希望将搜索表单与我的导航栏保持在同一行。如果导航是div，我想我知道如何处理，但我正在处理的主题是将nav作为数组处理。这行代码存在于我的header.php文件中，用于导航：

<?php
  wp_nav_menu( array(
        'theme_location' => 'top', 
        'name' => 'top', 
        'container' => 'nav', 
        'container_id' => 'main-nav', 
        'menu_id' => 'top')
    );
?>

这是搜索表单的代码：

<div id="search"><?php get_search_form(); ?></div>

我想如果有任何问题我也会知道如何调整css，但是有关如何将这个数组与div结合起来的想法？它可能很简单，但我还在学习......谢谢！

回应评论.... 这是该部分生成的html：

<div id="container">
<div class="containerInner">
<header id="header">
<div class="logo">
<a href=""><img src="" /></a></div> 
<div id="search">
<form action="https://beta.harvest-express.com/" id="searchform" method="get"> 
<input type="text" value="" name="s" id="s" placeholder="Search for products" />
<input type="submit" class="button add_to_cart_button product_type_simple" id="searchsubmit" value="Go" /> 
<input type="hidden" name="post_type" value="product" /></form></div> 
<div class="clear"></div>
<nav id="main-nav" class="menu-main-navigation-container"><ul id="top" class="menu">
<li id="menu-item-10962" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10717 current_page_item menu-item-10962"><a href="https://beta.harvest-express.com/">Home</a></li>
<li id="menu-item-10956" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10956"><a href="https://beta.harvest-express.com/who-we-are/">Who we are</a></li>
<li id="menu-item-10954" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10954"><a href="https://beta.harvest-express.com/how-this-works/">How This Works</a></li>
<li id="menu-item-10953" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10953"><a href="https://beta.harvest-express.com/delivery/">Delivery</a></li>
<li id="menu-item-10955" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10955"><a href="https://beta.harvest-express.com/membership/">Membership</a></li>
<li id="menu-item-10961" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10961"><a href="https://beta.harvest-express.com/contact-us-4/">Contact Us</a></li>

        </header>

以下是搜索表单和导航的相关css：

.menu{
width:100%;
text-align: center;
padding:0 ;
margin-top: 10px;
background: url(images/line2.png) repeat-x bottom;

}

/* level 0
-------------------------------------------------------------- */


.menu > ul > li:first-child,
#main-nav > ul > li:first-child {
    margin-left:40px;
}
.menu > ul > li:last-child,
#main-nav > ul > li:last-child {
    margin-right:20px;
}

.menu > ul > li,
#main-nav > ul > li {
    padding: 3px 1px;
    margin-left:5px;
    display:inline-block;
    position: relative;
}
.menu > ul > li .sf-sub-indicator,
#main-nav > ul > li .sf-sub-indicator {
    display: none;
}
.menu > ul > li.clearence,
#main-nav > ul > li.clearence {
    float:right;
}


.menu > ul > li.current_page_item,
#main-nav > ul > li.current_page_item ,
.menu > ul > li:hover,
#main-nav > ul > li:hover {
    padding: 2px 0px;
    border:1px solid #acacac;
    border-bottom:1px solid #fff;
    background: white;
}
#search {
float:right;
width:235px;
text-align: left;
margin-bottom: 0;

}

#search input[type="text"] {
    width:190px;
    color:#828282;
    font-size:11px;
    padding-right: 30px;
}

#search input[type="submit"] {
    color: #818181;
}
#search .button {
    margin-left:-30px;
    padding:0;
    border:none;
    background: none;
}
#search .button span {
    color:#828282;
    background: none;
    text-transform: uppercase;
}

Answer 1

你可以从：

开始

#search, #main-nav {
  float: right;
}
#search + .clear {
  clear: none;
}

但是如果您可以删除两个元素之间的<div class="clear"></div>，则不需要第二条规则。

搜索表单与导航（数组）php在同一行

1 个答案: