Question

看看图片：http://i.stack.imgur.com/jkK3u.jpg

我尝试创建一个浮动在标题图像上方的网站标题，但是有一个我无法删除的不需要的空间。这是我的CSS代码：

    #header {
        clear:both;
        overflow:hidden;
        z-index:1;
        position:relative;
        max-width:1130px;
        margin:10px auto 0;
    }
    .site_title {
        overflow:hidden;
        margin-top:50px;
        background-color:#c03;
        height:40px;
        width:50%;
        float:left;
    }
    .st_hidden .site_title {
    }
    .site_title h1 {
        float:left;
        padding:0 0 0 10px;
        font-size:28px;
        font-family:'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
    }
    /*site title*/
     .site_title h1 a {
        color:#fff;
        line-height:36px;
    }
    /* site title */
     .site_title h1 .header_logo a {
        overflow:hidden;
        display:block;
        width:100%;
        height:36px;
        text-indent:-9999px;
    }
    .site_title h2 {
        float:left;
        height:20px;
        overflow:hidden;
        line-height:18px;
        padding:10px 0 0 20px;
        color:#fff;
        font-size:12px;
        font-weight:normal;
    }
    /* site slogan*/
     #header_image {
        max-width:1130px;
        max-height:182px;
        margin-bottom:5px;
        padding:1px;
        border:2px solid #ccc;
        margin-top:0px;
    }
    .st_hidden #header_image {
        margin-top:5px;
    }
    #header_image_border {
        overflow:hidden;
        width:100%;
        height:100%;
    }
    #header_image_border img {
        width:100%;
        height:100%;
    }

这是我的HTML代码：

<div id="header"<?php if($zbench_options['hide_title']!='') echo ' class="st_hidden"'; ?>>
    <?php $logo=''; if($zbench_options['logo_url']!='') $logo=' class="header_logo" style="background:url('.$zbench_options['logo_url'].') no-repeat 0 0"'; ?>
    <div class="site_title">
        <h1 <?php if($logo) echo $logo; ?>><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
        <h2><?php bloginfo('description');?></h2>
        <div class="clear"></div>
    </div>
    <?php if ( get_header_image() != '' ) {
        ?>
    <div id="header_image">
        <div id="header_image_border">
            <a href="<?php if($zbench_options['header_image_url']!='') { echo $zbench_options['header_image_url']; } else { echo home_url('/'); } ?>"><img src="<?php header_image(); ?>" width="1130" height="180" alt="" /></a>
        </div>
    </div>
    <?php } ?>
</div>

Answer 1

这个空间是由这一行引起的：

margin-top: 50px

<。>在.site_title标签中。你应该删除这一行。如果您想将文本放在图像上而不是旁边，请添加

position: absolute | relative

到图片并设置top属性 - 它取决于你想要得到的确切内容。

不需要的白色区域

1 个答案: