如何在单行中显示徽标和标题？

Question

我从 twentyfourteen 扩展了我的主题。我现在有这个 header php:

<header id="masthead" class="site-header" role="banner">
    <div class="header-main">
        <img class="site-logo" src="<?php echo bloginfo('stylesheet_directory');?>/images/ic_logo.png" alt="Image" width="32" height="32"/>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

        <div class="search-toggle">
            <a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
        </div>

        <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
            <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
            <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
        </nav>
    </div>

    <div id="search-container" class="search-box-wrapper hide">
        <div class="search-box">
            <?php get_search_form(); ?>
        </div>
    </div>
</header>

和 CSS class 用于徽标图像：

.site-logo {
    float: left;
}

基本主题CSS 样式：

.site-title {
    float: left;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    margin: 0;

    /* Nav-toggle width + search-toggle width - gutter = 86px */
    max-width: -webkit-calc(100% - 86px);
    max-width:         calc(100% - 86px);
}

.site-title a,
.site-title a:hover {
    color: #fff;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

但是标识显示在站点名称上方...

如何将其对齐成单个字符串？

Answer 1

CSS属性你这里需要理解的是display属性。 img标签的显示值为inline-block，所以它有宽度和高度，并且会显示在同一行。但是，h1 标签的显示值为 block。块级元素本质上是在自身前后放置一个换行符，使它们显示在自己的行上。

您可以通过将 h1 设为 inline 或 inline-block 元素来克服此行为：

h1 { display: inline-block; }

或者使用 float 属性来克服这种行为。对于新手来说，这会有点棘手。 W3Schools provide this article，您可能会觉得有用。

如何在单行中显示徽标和标题？

How to show logo and title in single line?

html

css

php

wordpress-theming