Как показать логотип и название в одной строке?

Question

Я продлил тему с двадцати четырнадцати. И у меня есть этот заголовок 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 для изображения логотипа:

.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. Элементы уровня блока по существу ставят разрыв строки до и после себя, делая их отображаемыми на их собственной линии.

Вы можете преодолеть это поведение, либо делая h1inline или inline-block элемент:

h1 { display: inline-block; } 

Или с помощью float собственности, чтобы преодолеть эту проблему. Это будет немного сложнее для новичков, чтобы они обнялись. W3Schools provide this article, который вам может пригодиться.