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>

Sticky Bar:(我必须添加 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

I am unable to place the search form + some images next to each other on the right side of the bar & in the middle of the bar

不完全确定你的意思但是:

要在右侧显示搜索表单，您可以使用 float: right。尝试将其添加到您的 CSS 文件中

#searchform {
    float: right;
}