在導航（陣列）的同一行上搜索表單php

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>兩個元素之間，你並不需要第二個規則。