有什么方法可以在< h1>之后放置文本.在同一条线上? [英] Is there a way I can place text after an <h1> on the same line?

问题描述

我有以下代码:

<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

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

我需要做的是在标题的右侧显示这样的文本:

What I need to be able to do is have text appear to the right of the heading like this:

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

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

我认为这并不是一件容易的事.谁能建议我该怎么做?我想我的标题需要某种外部封闭的DIV，但是当我尝试使文本始终显示在标题下方而不是右侧时.

I think this is not so easy to do. Can anyone suggest how I could do this? I guess I need some kind of outer enclosing DIV for my heading but when I tried that the text always appears below the heading instead of to the right.

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

Here is an example of what I have now

演示

推荐答案

将其全部包装在< div> 中，将粉红色的背景色和底部边框移至< div> ，然后将< h1> 浮动到左侧.

Wrap it all in a <div>, move the pink background color and bottom border to the <div>, and float the <h1> to the left.

例如:

<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/

您可能会想稍微修饰一下填充物和边距.

You'll probably want to pretty up the paddings and margins a bit though.

这篇关于有什么方法可以在< h1>之后放置文本.在同一条线上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！