我有以下代码：
<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但是当我尝试时,文本总是出现在标题下方而不是右侧.
这是我现在拥有的一个例子
解决方法
将其全部包裹在< 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/
你可能想要稍微提高填充和边距.
