php - 如何减少标题中的主页链接大小？

Question

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

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

在

之上

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

并将其放入自己的 div 中，并为 Logo 赋予全新的 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>