有没有办法在同一行的<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但是当我尝试时,文本总是出现在标题下方而不是右侧.

这是我现在拥有的一个例子

演示

Answer 1

将它全部包裹在一起<div>,将粉红色的背景颜色和底部边框移动到<div>,然后<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;
}

小提琴:http://jsfiddle.net/ambiguous/FNLBD/

你可能想要稍微提高填充和边距.