0

私はワードプレスで作業しており、検索フォームをナビゲーション バーと同じ行に表示したいと考えています。ナビゲーションが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;
}
4

1 に答える 1

0

あなたはで始めることができます：

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

ただし、2つの要素の間を削除できる場合は<div class="clear"></div>、2番目のルールは必要ありません。

于 2013-03-06T20:58:27.100 に答える