Question

我将2张图片（facebook和youtube）放到我的标题中，然而，现在的问题是它们似乎无法点击，尽管它们是链接，而在移动设备中查看时，它们会被顶部的联系号码阻止。 / p>

我不知道如何解决这个问题，任何人都可以帮忙吗？

这是我的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;
}

Answer 1

尝试将两个包装器向右浮动会使事情变得困难。左边有一个左列，右边有一个左列更容易。在右侧的那个中你可以添加一个额外的包装器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;
}

图片位置突破响应

1 个答案: