Question

您好我的徽标和wordpress中的一个文本出现了这个问题。

我希望我的徽标后面有一个文本，使用我使用的代码

                        <?php if ( $logoImg || $blogname ) { ?>
                            <div class="site-branding <?php if ( ! display_header_text() ) { echo 'hide-header-text'; } ?>">

                                    <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>

                                   <h1 class="site-logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

                            </div>

结果就是这张图片

我希望它像这样

所以我尝试了这些代码

<h1 class="site-logo" style = "
display:inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>

                                       <h1 class="site-logo" style = "
display:inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

这一个

<h1 class="site-logo" style="text-align:left;float:left;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a></h1>

                                   <h1 class="site-logo" style="text-align:right;float:right;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

但我没有运气。有人能帮助我吗？

更新1：

页面在这里

http://expertalbert.com/

我也试过把它放在一行

<h1 class="site-logo" style="display: inline;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo $logoImg; ?>" alt="logo" /></a><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

没有＆＃34;显示：内联＆＃34;在一行h1。非常感谢。

Answer 1

尝试将$(document).ready(function () { $('.btn-group > .btn').removeClass('active'); $('.btn-group > .btn').find('a[href="' + location.pathname + '"]') .closest('.btn').addClass('active'); });添加到您的h1元素

Answer 2

尝试在容器上使用display: flex：

#masthead .site-branding {
    display: flex;
    width: 250px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    vertical-align: middle;
}

有关对齐选项，请参阅：Methods for Aligning Flex Items

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 3

HTML块级元素（display:block）（例如<h1>）可以通过多种方式并排显示。

float

浮动元素将它们拉出页面流;要做到这一点，你必须浮动应该出现在一起的所有元素，并确保在最后一个之后clear。

// css rule to float *all* site-logos left
h1.site-logo {
    float: left;
}

浮动会扰乱页面流，所以对于像这样简单的东西，有更好的选择。

flex layout

使用flex布局为您提供了很多功能，但是这里有太多内容......您应该找到a tutorial专门介绍flex布局以了解所有相关内容。
然而，一个简单的开始就是将显示设置为flex或inline-flex ... 注意，您将inline-flex应用于父你想要安排的元素的容器，所以CSS将是

.site-branding {
    display: inline-flex;
}

Flex在新版浏览器中得到了很好的支持，所以如果你必须支持较旧的浏览器（例如不支持flex的IE9），你可能会选择我列出的最后一种方法，作为flex的替代方法。

inline-block

将显示类型从block更改为inline-block允许元素内嵌（彼此相邻），同时保留许多块质量，例如固定高度和宽度。这只是

.site-logo {
    display: inline-block;
}

在这里的所有情况下，徽标不确实是一级标题，因此修改后的标记可能是更好的方法。

Answer 4

我需要检查其余的代码，以便能够告诉您如何解决此问题。但我会将图像浮动到左侧或将所有内容显示为内联块。然后为文本提供一个行高，以匹配图像的高度。它应该使文本与您的图像很好地对齐。此外，您应该只在页面上使用一个h1标签，出于搜索引擎优化的目的，最佳做法是只有一个。

Answer 5

根据您分享的截图，我相信

你的第一次尝试没有用，因为没有足够的空间让两个元素都适合一行而导致换行
你的第二次尝试没有用，因为你没有为你的浮动元素指定一个宽度，according to this article会导致不可预测的行为

我个人也不建议在页面上使用两个h1，也不使用h1来包装网站的徽标。

但是，如果您希望第一次尝试工作，只需将white-space: nowrap添加到包含徽标和文字的元素中。

Answer 6

尝试通过使宽度小于一个EM来缩小图像，或尝试使用不同的像素大小，即10px，5px等;

  <h1 class="site-logo" style="width:.5em; text-align:left; float:left;"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo   $logoImg; ?>" alt="logo" /></a></h1>

如何使h1和h1都在同一行上渲染

6 个答案: