图片位置中断响应

我在标题中放置了两张图片（facebook和youtube），然而，现在的问题是，尽管它们是链接，但似乎无法点击，当在手机中查看时，它们会被顶部的联系号码阻止。

http://seaicf.com

我不知道怎么解决这个问题，有人能帮忙吗？

这是我的header.php，直到我插入图片的那一行：

<body <?php body_class(); ?>>
    <div id="page-container">
<?php
    if ( is_page_template( 'page-template-blank.php' ) ) {
        return;
    }
    $et_secondary_nav_items = et_divi_get_top_nav_items();
    $et_phone_number = $et_secondary_nav_items->phone_number;
    $et_email = $et_secondary_nav_items->email;
    $et_contact_info_defined = $et_secondary_nav_items->contact_info_defined;
    $show_header_social_icons = $et_secondary_nav_items->show_header_social_icons;
    $et_secondary_nav = $et_secondary_nav_items->secondary_nav;
    $primary_nav_class = 'et_nav_text_color_' . et_get_option( 'primary_nav_text_color', 'dark' );
    $secondary_nav_class = 'et_nav_text_color_' . et_get_option( 'secondary_nav_text_color', 'light' );
    $et_top_info_defined = $et_secondary_nav_items->top_info_defined;
?>
    <?php if ( $et_top_info_defined ) : ?>
        <div id="top-header" class="<?php echo esc_attr( $secondary_nav_class ); ?>">
            <div class="container clearfix">
              <div class="container clearfix">
            <?php
                $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
                    ? $user_logo
                    : $template_directory_uri . '/images/logo.png';
            ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
                </a>

            <?php if ( $et_contact_info_defined ) : ?>
                <div id="et-info">
                <?php if ( '' !== ( $et_phone_number = et_get_option( 'phone_number' ) ) ) : ?>
                    <span id="et-info-phone"><?php echo esc_html( $et_phone_number ); ?></span>
                <?php endif; ?>
                <?php if ( '' !== ( $et_email = et_get_option( 'header_email' ) ) ) : ?>
                    <a href="<?php echo esc_attr( 'mailto:' . $et_email ); ?>"><span id="et-info-email"><?php echo esc_html( $et_email ); ?></span></a>
                <?php endif; ?>
                <?php
                if ( true === $show_header_social_icons ) {
                    get_template_part( 'includes/socialGoogle analytic_icons', 'header' );
                } ?>

                </div>
                </div> <!-- #et-info -->
               <ul class="et-social-icons">
                 <div><a href="http://www.facebook.com"target="_blank"><img  src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" width="75" height="25"/></a>&nbsp;&nbsp;&nbsp;<a href="https://www.youtube.com"target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" width="75" height="25"></a></div>

使用控制该标头中类的CSS更新：

#top-header .container {
padding-top: 10px;
}
.container {
text-align: left;
margin: 0 auto;
width: 1080px;
position: relative;
}
media="all"
#top-header .et-social-icons {
float: right;
display: inline-block;
margin-top: -37px;
-moz-margin-top: 5px;
-webkit-margin-top: 5px;
}

试图将两个包装器向右浮动会使事情变得困难。只在左边和右边各有一列比较容易。在右边的那个里，你可以添加一个额外的包装器div，让社交媒体按钮出现在电话号码下面：

<div class="container clearfix">
    <a href="http://seaicf.com/%e9%a6%96%e9%a1%b5/">
    <img src="http://seaicf.com/wp-content/uploads/2015/02/logo-75.png" alt="ISI MonQ Academy" id="logo">
    </a>
    <div id="et-info">
        <div>
            <span id="et-info-phone">1800-800-800</span>
            <a href="mailto:info@seaicf.com"><span id="et-info-email">info@seaicf.com</span></a>
        </div>
        <ul class="et-social-icons">
            <div>
                <a href="http://www.facebook.com" target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/facebooklike.png" height="25" width="75"></a>
                <a href="https://www.youtube.com" target="_blank"><img src="http://seaicf.com/wp-content/uploads/2015/02/youtube.png" height="25" width="75"></a>
            </div>
        </ul>
    </div>
</div>

浮动的东西很复杂，只需将您创建的类替换为：

.container {
    text-align: right;
    margin: 0px auto;
    width: 1080px;
    position: relative;
}
#top-header .et-social-icons {
    margin-top: 10px;
}
#et-info {
    font-size: 20px;
}

相关内容

最新更新

热门标签：