0

我在 wordpress 中工作，希望搜索表单与导航栏位于同一行。如果导航是一个 div，我想我会知道如何处理，但我正在处理的主题是将导航作为数组处理。这行代码位于我的 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;
}
4

1 回答 1

0

你可以从：

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

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

于 2013-03-06T20:58:27.100 回答