2014-01-06 2 views
0

Wordpress에서 스티키 바를 만들었지 만, 바 중앙에 바의 오른쪽에 검색 양식 + 이미지를 놓을 수 없습니다. 바 중앙에 & . 어떤 도움을 주셔서 감사합니다.CSS Sticky Bar - 중간에 배치 할 수 없습니다.

검색 양식 :

<form method="get" id="searchform" action="<?php echo esc_url(home_url('/')); ?>" role="search"> 
    <label for="s" class="assistive-text"><?php _e('Search', 'boom'); ?></label> 
    <input type="text" class="field" name="s" value="Search for.. <?php echo esc_attr(get_search_query()); ?>" id="s" placeholder="<?php esc_attr_e('Search &hellip;', 'boom'); ?>" onblur="onBlur(this)" onfocus="onFocus(this)" /> 
    <input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e('Search', 'boom'); ?>" /> 
</form> 

스티커 바 (나는 그것이 같은 줄에 검색 양식 + 이미지를 유지하지 않을 사람 때문에 사업부 아이디 searchform를 추가했다가 ..)

<div id="sticky-header"> 
<div id="sticky-header-title"> 
    <a href="<?php echo bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><?php echo $thsp_sticky_header_title; ?></a> 
</div> 
<div id="sticky-header-menu"><div id="searchform"> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25" /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25" /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25" /> 
    <img src="http://localhost/public_boom/wp-content/uploads/Button-100x100.png" width="25" height="25" /> 
    <?php get_search_form(); ?> 
</div></div></div> 

CSS :

#sticky-header { 
    margin-top: -200px; 
    padding: 8px 11px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 99998; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    border-width: 1px 1px; 
    opacity:0.9; 
    filter:alpha(opacity=90); /* For IE8 and earlier */ 
    -moz-box-shadow: 0px 15px 10px -10px #9F9F9F; 
    -webkit-box-shadow: 0px 15px 10px -10px #9F9F9F; 
    box-shadow: 0px 15px 10px -10px #9F9F9F; 
} 
#sticky-header-title { 
    float: left; 
    font-size: 22px; 
    line-height: middle; 
    margin: 0 !important; 
} 
#sticky-header-menu { 
    float: right; 
    text-align: right; 
    margin: 0 !important; 
} 
#searchform form { 
    display: inline; 
    line-height: middle; 
} 

화면 인쇄 : http://oi44.tinypic.com/2113y0z.jpg 검색 창 또는 이미지도 중간에있는 바 (위 - 아래)의 I 검색 양식 + 막대의 중간에 줄 &의 오른쪽 옆에 서로 에 일부 이미지를 배치 드릴 수 없습니다

+0

사이트에 대한 링크가 있습니까? – Beep

+0

나는이 시점에서 오프라인 작업을하고 있지만 사진을 업로드했습니다. – user3096206

+0

http://oi44.tinypic.com/2113y0z.jpg가 꺼져 있습니다. – Christian

답변

0

이 말의 의미가 확실하지 않지만

검색 양식을 오른쪽에 표시하려면 float: right을 사용하십시오. 이 파일을 CSS 파일에 추가해보십시오.

#searchform { 
    float: right; 
} 
+0

위의 CSS 라인 코드와 함께 검색 양식을 포함시키지 않으면 어떤 이유로 인해 검색 줄이 다른 줄로 이동합니다. / – user3096206