Display heading inline with following paragraph

问题

Given the following semantic markup:

<h3> SCOPE OF WORK. </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

I would like to display the heading inline with the paragraph, like so:

SCOPE OF WORK. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Option 1: float the heading.

This works so long as the heading fits on one line. When it doesn't, the float forms a wide block so the paragraph starts to the right of the block, or below instead of continuing inline:

| SCOPE OF | Lorem |
| WORK     | ipsum |
| sit amet, consect|

Option 2: display both elements inline.

A style rule such as: h3, h3+* {display: inline;} might work. This assumes that they are preceded & followed by other block elements. Otherwise, other inline elements would flow into them. Also, the adjacent selector (+) is not available in all browsers.

Option 3?

Without adding unnecessary classes or wrapper elements, and keeping it valid & semantic (no span.h3 inside the paragraph!), is there a better way to do this simple thing?

回答1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
h3 {display:run-in;}
p { display:block; }
div { width: 400px; }
</style>
</head>

<body>
<div>
    <h3> this is a title </h3>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
    <p> this is a body of text, this is a body of text, this is a body of text, this is a body of text, this is a body of text,this is a body of text</p>
</div>
</body>
</html>

That puts the h3 tag in with the p tag. http://www.quirksmode.org/css/display.html doesnt work in ie7 or lower or Firefox at all, so not the best solution

来源：https://stackoverflow.com/questions/3826381/display-heading-inline-with-following-paragraph

标签

html

css

semantic-markup