Question

我尝试在搜索栏旁边添加一张图片（137×30），但我无法正常使用。它应该看起来像这样：

搜索栏的代码如下：

<?php get_search_form(); ?>

添加图片给了我这个结果：

如何正确对齐此图像？

如果您需要查看此网页的代码作为参考：

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?> class="no-js">
<!--<![endif]-->
<head>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '-', true, 'right' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css">
<![endif]-->
<script type="text/javascript">
!function(){function t(){var t=r("utm_content");if(t){var e=new Date;e.setDate(e.getDate()+30),document.cookie=t+";expires="+e.toGMTString()+";path=/"}else if(document.cookie)for(var o=document.cookie.split(/; */),n=0;n<o.length;n++)if(0===o[n].toLowerCase().trim().indexOf("utm_content=")){t=o[n];break}return t}function e(t){try{console.log(t)}catch(e){alert(t)}}function r(t){var e=top.location.search?top.location.search.substring(1):null;if(e)for(var r=e.split("&"),o=0;o<r.length;o++)if(0===r[o].toLowerCase().trim().indexOf(t+"="))return r[o];return null}var o="",n=r("mctest");if(n)e("dnr tag version: 20160125"),o="http://localhost:8080/rip/library/dnr/mcDnrTag.debug.js";else{var a=t(),c="";a&&(c=top.location.search?0<=top.location.search.indexOf("utm_content")?top.location.search:top.location.search+"&"+a:"?"+a,o="https://script.advertiserreports.com/redirector/dnr"+c)}if(o){var i=document.createElement("script");i.src=o,i.type="text/javascript",scriptTag=document.getElementsByTagName("script")[0],scriptTag.parentNode.appendChild(i)}}();
</script>
<?php 
    wp_head();
    if(function_exists('ot_get_option')) 
        echo ot_get_option( 'cnkt_google_analytics' );
?>
</head>

<body <?php body_class(); ?>>
<?php 
    $cats = '';
    foreach(get_the_category() as $category)
        $cats .= $category->slug . ' '; 
?>
<div id="container" class="<?php echo $post->post_name; echo ' '. $cats; ?>">
    <a href="#page-content" class="skip-to-content" tabindex="0">Skip to main content</a>
    <div id="wrapper">
        <header class="site-header" role="banner">
            <div class="row">
                <div class="large-12 columns">  
                    <ul class="secondary hide-for-medium-down">
                        <li class="mailinglist"><a href="/join-our-mailing-list/">Join our Mailing List</a></li>
                        <li class="quote"><a href="/request-quote/">Request a Quote</a></li>
                    </ul>
                    <div class="nav-wrap"> 
                        <div class="logo">
                            <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" /></a>
                        </div>
                    <div class="sub-wrap hide-for-medium-down">          
                        <nav id="utilitynav" role="navigation">
                            <ul id="menu-utility" class="menu">
                                <li id="menu-item-2398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2398 menu-item-news">
                                    <a href="http://test-shaver-inc.pantheonsite.io/resource-center/news/">News &amp; Events</a>
                                </li>
                                <li id="menu-item-2397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2397 menu-item-contact-us">
                                    <a href="http://www.shaverinc.com/contact-us/">Contact Us</a>

                                </li>
                                <li class="linkedin">
                                    <a href="https://www.linkedin.com/company/shaver-industries-inc<?php echo '-' ?>" target="_blank">
                                        <em class="fa fa-linkedin-square"></em>
                                        <span class="offscreen">LinkedIn</span>
                                    </a>
                                </li>
                                <li class="twitter">
                                    <a href="https://twitter.com/shaver_inc" target="_blank">
                                        <em class="fa fa-twitter"></em>
                                        <span class="offscreen">Twitter</span>
                                    </a>
                                </li>
                                <li class="facebook">
                                    <a href="https://www.facebook.com/ShaverIndustriesInc?fref=ts" target="_blank">
                                        <em class="fa fa-facebook"></em>
                                        <span class="offscreen">Facebook</span>
                                    </a>
                                </li>
                                <li class="youtube">
                                    <a href="https://www.youtube.com/channel/UC6zDe4BG-OAuV4_JLrmu-JA" target="_blank">
                                        <em class="fa fa-youtube"></em>
                                        <span class="offscreen">YouTube</span>
                                    </a>
                                </li>
                            </ul>
                     <?php /*if ( has_nav_menu('utility-menu')):?>
                        <?php wp_nav_menu( array( 'theme_location' => 'utility-menu', 'container'=>'' ) ); 
                        dynamic_sidebar('social-media'); ?>
                     <?php endif;*/ ?>
                     <?php
                        if ( function_exists( 'ot_get_option' ) ) {
                            if (ot_get_option('cnkt_phone')) {
                                 echo '<span class="number">'.ot_get_option('cnkt_phone').'</span>';
                            }
                        }   
                     ?>             
                      </nav>
                     <?php get_search_form(); ?>   
                    </div>    
                    </div>                          
                    <nav id="mnav" class="hide-for-medium-down" role="navigation">
               <?php if ( has_nav_menu('primary-menu')):?>
                  <?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container'=>'' ) ); ?> 
               <?php endif; ?>  

                  </nav>     
                </div>
            </div>  
            <div id="mnav-toggle" class="nav-toggle hide-for-medium-up" aria-hidden="true">
                <a href="javascript:void(0);">
               <span class="one"></span>
               <span class="two"></span>
               <span class="three"></span>
            </a>
            </div> 
        </header>
        <div id="mobile-nav"><div class="wrap"></div></div>
        <?php if(!is_page('home')){
           get_template_part('includes/page-banner');
        } ?>
        <!-- #page-content -->
        <div id="page-content">

Answer 1

在input和img之外添加ID，并添加以下css。演示示例添加如下。请参阅小提琴http://jsfiddle.net/wD5T9/

<强> HTML

<div id='searchWrapper'>
    <input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/>
    <img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>

<强> CSS

#searchWrapper img {
    vertical-align: middle;
}

Answer 2

以下是您问题的解决方案....

您的 Html

<div class="searchform">
<form method="get" action="http://www.shaverinc.com">
    <label for="search" class="offscreen">Search Products</label>
   <input type="search" placeholder="Search Products" id="s" name="s" value="">
   <button type="submit"><i class="fa fa-search"></i><span class="offscreen">Submit</span></button>
</form>
</div>
<div class="flags">Hello</div>

你的 CSS 这里......

.searchform {
position: relative;
overflow: hidden;
height: 34px;
width: 90%;
display: inline-block;
float: left;
}
.flags{
display: block;
width: 9%;
height: 34px;
position: relative;
float: left;
background: #ccc;
}

根据您的需要操纵宽度......

Answer 3

我自己弄清楚，我应该使用div + table来解决这个问题

<div style="position: relative; width: 600px;">
                      <table style="width: 100%">
                     <tr>
                     <td width="80%"><?php get_search_form(); ?></td>
                     <td width="20%"><img src="<?php echo get_template_directory_uri(); ?>/img/flags.png"></td>
                    </tr> 
                    </table>
                    </div>

如何将图像添加到网页上的正确位置

3 个答案: