Question

给出以下语义标记：

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

我想显示与段落内联的标题，如下所示：

工作范围。 Lorem ipsum dolor坐下来，奉献精神的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。

选项1：浮动标题。

只要标题适合一行，这就有效。当它没有时，浮点形成一个宽块，所以段落从块的右边开始，或者在下面而不是继续内联：

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

选项2：显示内联元素。

样式规则如：h3, h3+* {display: inline;}可能有用。这假定它们先于＆amp;其次是块元素。否则，其他内联元素将流入其中。此外，相邻的选择器（+）并非在所有浏览器中都可用。

选项3？

不添加不必要的类或包装元素，并保持其有效＆amp;语义（段落中没有span.h3！），是否有更好的方法来做这件简单的事情？

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

将h3标签放入p标签。 http://www.quirksmode.org/css/display.html 在ie7或更低版本或Firefox根本不起作用，所以不是最好的解决方案

内联显示标题以下段落

1 个答案: