Question

我正在尝试在wordpress模板上编辑标题时出现故障。基本上，我有一个徽标图像，我已将其放置在标题的中心。我希望此徽标充当主页的链接。我已设法做到这一点，但此刻，标题的整个宽度充当链接，因为我只希望链接包含图像（即只是图像的尺寸）。我不知道为什么会这样，我知道我会做一些愚蠢的事，但是反复试验并不能让我快速到达任何地方。

非常感谢任何帮助。

这是html / php

<!-- BEGIN #header -->
    <div id="header">

        <!-- BEGIN .row -->
        <div class="row">

            <!-- BEGIN .sixteen columns -->
            <div class="sixteen columns">

                <?php $header_image = get_header_image(); if ( ! empty( $header_image ) ) { ?>
                    <h1 id="custom-header">
                            <a href="<?php echo home_url(); ?>/" title="Home">
                                    <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo('name'); ?>" />
                                        </a>
                                    <?php bloginfo( 'name' ); ?></h1>

                <?php } ?>

            <!-- END .sixteen columns -->
            </div>

        <!-- END .row -->
        </div>

        <!-- BEGIN .row -->
        <div class="row">
                    ......

CSS：

#header {
line-height: 0;
margin: 0px;
position: relative;
z-index: 99;
}


#custom-header {
display: block;
padding: 0px;
font-size: 0;
text-indent: -999em;
line-height: 0;
margin:0px;
padding: 0px;
overflow: hidden;
z-index: 8;
}

#custom-header img {
display:block;
margin: 0px auto 0px;
height: auto;
text-align: center;
padding: 0px;
vertical-align: bottom;
}

.row { 
width: 100%; 
margin: 0 auto; 
}


.row .sixteen   { width: 100%; }

Answer 1

使用此

#custom-header a{
    display:block;
    width:280px;
    height:80px;
    margin:0 auto;
}

这是更新后的jsFiddle File

HTML / CSS - 跨越整个标题的徽标链接

1 个答案: