css - 有没有办法可以在同一行的 <h1> 之后放置文本？

Question

我有以下代码:

<h1><span>Test Heading</span></h1> 

和 CSS:

h1 { font-size: 1.3em; font-family: calibri, arial;border-bottom: 1px solid #999; padding-bottom: 10px;margin-bottom: 5px; background-color: pink;}
h1 span { color: #fff; background-color: #446688;padding: 1px 5px 3px 5px;
          -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

现在它显示如下:

XXXXXXXXXXXXXXXX
x Test Heading X
XXXXXXXXXXXXXXXX

----------------------------------------------------------------------------------------

我需要做的是让文本显示在标题的右侧，如下所示:

XXXXXXXXXXXXXXXX     Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
x Test Heading X     more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
XXXXXXXXXXXXXXXX     aaaaaaaaaaaaaaaaaaaaaaaaaaa

----------------------------------------------------------------------------------------

我觉得这不是那么容易做到的。谁能建议我该怎么做？我想我的标题需要某种外部封闭 DIV，但是当我尝试文本总是出现在标题下方而不是右侧时。

这是我现在的例子

demo

Answer 1

将其全部包装在 <div> 中, 将粉红色背景颜色和底部边框移动到 <div> , 并 float <h1>向左。

例如:

<div class="bb">
    <h1><span>Test Heading</span></h1> 
    This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</div>

CSS:

.bb {
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    background-color: pink;
    overflow: hidden;
}
h1 {
    font-size: 1.3em;
    font-family: calibri, arial;
    margin-bottom: 5px;
    float: left;
}
h1 span {
    color: #fff;
    background-color: #446688;
    padding: 1px 5px 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

fiddle :http://jsfiddle.net/ambiguous/FNLBD/

尽管如此，您可能想要美化一下内边距和边距。