Question

我正在使用html和css来使我的标题的主页链接仅覆盖标题大小的左半部分。每次我调整Home Link的大小时，它都会改变我的标题大小。我以为是因为他们在同一个div中，所以我把

<img class="header-logo"...</>

以上

<a class="home-link"...</a>

并将其放入自己的div中，并为徽标提供了一个全新的ID。不幸的是，这使我的标题更宽，我不想。你将如何减少主链接的大小？

我正在使用Wordpress及其二十三个默认主题。

<header id="masthead" class="site-header" role="banner">
            <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
                <img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
                <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
                <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            </a>

以下是相关CSS的示例：

.site-header {
    margin:10px auto 0 auto;
    max-width:980px;
    padding:0;
    background-size: 980px auto;
}


.site-header .home-link {
    min-height: 50px; 
}

.header-logo {
    max-width:60%;
    display:block;
    padding-top:3px;
    padding-bottom:5px;
    position:relative;
}

Answer 1

标题徽标，标题和描述都嵌套在.home-link中。因此，更改主链接将对子类产生影响。您可以尝试下面的代码，您可以在不影响其他类的情况下设置单个类的样式。

<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a>
            <img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a></h2>

Answer 2

为什么你在你的html中放了这么多的类：为什么不呢

<header id="masthead" class="site-header" role="banner">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <img src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" />
    <h1><?php bloginfo( 'name' ); ?></h1>
    <h2><?php bloginfo( 'description' ); ?></h2>
</a>

然后

/* css */
.site-header {
    margin:10px auto 0 auto;
/*    max-width:980px;  not needed : the visitor's choice...*/ 
    padding:0;
    background-size: 980px auto;
}


.site-header > a {
    min-height: 50px; 
    width : 50%; /* site header link will cover only 
             a half of the header, the containing div */
}

.site-header > img {
    max-width:60%;
    display:block;
    padding-top:3px;
    padding-bottom:5px;
    position:relative; 
}

Answer 3

这是我最后使用的：

<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img class="header-logo" src="http://localhost/test/wp-content/themes/twentythirteen-child/resources/logo_big2_v2.png" /></a>
            <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

和

.site-header .home-link {
    min-height: 169px;
    max-width:50%;
    position:static;
left:-250px;
}

现在一切似乎都没问题，但不完全是，由于最小高度：169px，响应性被破坏且菜单没有在低屏幕分辨率下调整大小。我需要的CSS属性，否则徽标不在标题部分。一个问题解决了，这是一个新的问题。编辑：我还没有找到解决方案。

如何减少标题中的Home链接大小？

3 个答案: