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搜索表单，因为它不会将搜索表单+图像保留在同一行...）

<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

我无法将搜索表单+一些图像放在一起在酒吧的右侧＆amp;在酒吧中间

不完全确定你的意思，但是：

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

#searchform {
    float: right;
}

CSS Sticky Bar - 无法放置在中间位置

1 个答案: