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>，然后将<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/

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

Answer 2

将H1文本和其他文本放在单独的DIV中。然后使用CSS

使它们彼此浮动

Answer 3

Float标题。

Answer 4

试

display:inline;

http://jsfiddle.net/gKqQc/

Answer 5

将其添加到H1 CSS：

float: left;
margin-right: 10px;

这将使您的标题向左浮动，以便文本可以在右侧环绕它，检查this JS Fiddle，边距右边将在标题右侧添加10px边距以进行演示。

Answer 6

float - 将h1添加到left是这种情况下的最佳选择，并且您的标记可以通过一些调整来实现，以最佳方式完成此任务。

<div class="box">
    <h1>Test Heading</h1>
    <p>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.</p>
</div>

演示：jsfiddle.net/Marcel/ryGFq/10

你会看到演示中还有第二个选项，显示内容左对齐的最佳方式，但margin-left需要绝对值。

Answer 7

尝试

display: table-cell;

对于H1和文本。它们会彼此相邻。

有没有办法在同一行的<h1>之后放置文本？</h1>

7 个答案: