如何在一行中显示logo和标题（） _WordPress主题

我从twentyfourteen开始扩展我的主题。我现在有这个头文件php：

< header id="masthead" class="site-header" role="banner"> < div class="header-main"> < img class="site-logo" src="http://www.srcmini.com/< ?php echo bloginfo('stylesheet_directory'); ?> /images/ic_logo.png" alt="Image" width="32" height="32"/> < h1 class="site-title"> < a href="http://www.srcmini.com/< ?php echo esc_url( home_url('/' ) ); ?> " rel="home"> < ?php bloginfo( 'name' ); ?> < /a> < /h1> < div class="search-toggle"> < a href="http://www.srcmini.com/#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="http://www.srcmini.com/#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; }

【如何在一行中显示logo和标题（）】基本主题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; }

但是徽标显示在网站名称上方…
如何将其对齐为单个字符串？
#1你需要在此处了解的CSS属性是display属性。 img标签的显示值为inline-block, 因此它具有宽度和高度, 并将显示在同一行上。但是, h1标签的显示值为block。块级元素实际上在其前后放置换行符, 使它们在自己的行上显示。
你可以通过将h1设置为嵌入式元素或嵌入式块元素来克服此问题：