Wordpress 탐색 메뉴의 위치 지정 검색 양식

Question

안녕하세요 여러분, 내 wordpress 사이트의 내 탐색 메뉴에 검색 상자를 배치하려고합니다. Search Box Navigation이라는 플러그인을 사용하여 메뉴에 표시되도록했습니다. 이 플러그인을 사용하면 필요에 맞게 상자를 스타일화할 수 있습니다.

그러나 여기에서 내가 이슈에 직면 해 있습니다.

plugin 파일에있는 상자를 생성을 담당하는 코드는 : (나는

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

이 ...이 사이트에 나타나는 방식을 제어하기위한 노력의 일환으로 li에 클래스를 추가 내 navigation html는 :

<nav id="access" role="navigation"> 
     <div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div> 
      <div class="menu"> 
       <ul id="prime_nav" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#.com"><span>Item 1</span></a></li> 
        <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-8"><a href="http://#.com"><span>Item 2</span></a> 
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://#.com"><span>Item 3</span></a></li> 
        <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://#.com"><span>Item 4</span></a></li> 
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://incomebrokers.tld/93-2/"><span>Test</span></a></li> 
        <li class="menusearch"> 
          <form method="get" id="searchform" action="http://incomebrokers.tld//"> 
           <input type="text" value="Search"/> 
           <input type="submit" id="searchsubmit" value="Search" /> 
          </form> 
        </li> 
       </ul> 
      </div>        
    </nav> 

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

,536,913입니다

탐색 상자의 맨 오른쪽에이 상자를 배치하는 방법에 대한 도움말은 있지만 브라우저의 크기가 작을 때 조정할 수 있습니까?

Answer 1

nav의 각 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; 
} 

http://jsfiddle.net/mBBJM/4537/

당신은 그것을 유체 확인하고 탐색의 리튬에 대해 서로 다른 비율로 %의 폭을 설정 수있는 수도 필요해.