CSS Sticky Bar - 無法放置在中間

Question

我在Wordpress中製作了一個粘性條，但是我無法將搜索表單+一些圖像放在條的中間&右側的相鄰位置。任何幫助表示讚賞。

搜索表單：

<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> 

粘杆：（我不得不添加了DIV ID 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無論是搜索欄或圖像是在中間酒吧（從上到下）的

Answer 1

我不能把搜索表單+在欄的中間部分圖像彼此相鄰 在酒吧&右側

不完全確定這是什麼意思，但：

要在右側顯示搜索表單，您可以使用float: right。嘗試添加到您的CSS文件

#searchform { 
    float: right; 
}