如何将标题右侧的文字与徽标对齐？ （现在它低于标题）

Question

我在header.php文件中有这个代码，文本＆＃34; ALIGN_THIS_TEXT_ON_RIGHT＆＃34;确实显示在右侧，但它位于徽标和描述的水平下方，因为我希望它在右侧浮动，因此文本的顶部从徽标顶部开始的位置开始。

<hgroup>
     <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
     <p style="text-align: right;">ALIGN_THIS_TEXT_ON_RIGHT</p>
</hgroup>

我想要这样

Answer 1

非常简单的小提琴：

http://jsfiddle.net/Gcf3U/1/

不是世界上最语义的CSS，但演示了基本浮点数的使用。 在你的h1和h2周围包裹一个div。漂浮div离开。 然后将你的段落浮动。

<hgroup>
    <div class="left">
     <h1 class="site-title">Your image</h1>
     <h2 class="site-description">Your description</h2>
    </div>
    <p class="right">ALIGN_THIS_TEXT_ON_RIGHT</p>
</hgroup>

.left {
    float: left;
}

.right {
    float: right;
}

Answer 2

没有额外的CSS？

text-align与元素的位置无关，text-align right意味着文本是正确的。

此外，“hx”和“p”是块元素，因此每个元素都在彼此之下是正确的。这三个块占用父容器的整个宽度。

所以你可以在块中设置宽度+使用float：left;或使用display：inline-block;

例如尝试设置宽度：70％;为“h1”和“h2” 然后设置宽度：30％; （如果你有额外的保证金/填充，则降低）和浮动：右;到“p”块

Answer 3

你真的不应该像你那样内联你的样式，但是当你只是创建一个段落的页面宽度并将文本对齐到右边时，它并没有改变它在流程中的位置页面。

将p向右浮动。

<hgroup>
     <p style="float: right;">ALIGN_THIS_TEXT_ON_RIGHT</p>
     <h1 class="site-title">The H1 tag</h1>
     <h2 class="site-description">The h2 tag</h2>
</hgroup>

http://jsfiddle.net/HZ79c/