显示与以下段落内嵌的标题

发布于 2024-09-25 23:04:58 字数 1167 浏览 1 评论 0原文

给定以下语义标记：

<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 sat amet, consectetur adipisicing elit、sed do eiusmod tempor inciditunt UT Labore et Dolore Magna Aliqua。
Ut enim ad minim veniam，quis nostrud 练习 ullamco Laboris nisi ut aliquip ex ea commodo consequat.

选项 1：浮动标题。

只要标题适合一行，此方法就有效。如果没有，浮动会形成一个宽块，因此段落从块的右侧或下方开始，而不是继续内联：

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

选项 2：内联显示两个元素。

样式规则，例如：h3, h3+* {display: inline;} 可能有效。这假设它们位于 & 之前。接下来是其他块元素。否则，其他内联元素将流入其中。此外，相邻选择器 (+) 并非在所有浏览器中都可用。

选项 3？

不添加不必要的类或包装元素，并保持其有效和安全。语义（段落内没有 span.h3！），是否有更好的方法来完成这个简单的事情？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮凉 2024-10-02 23:04:58

<!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 中根本不起作用，所以不是最好的解决方案

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

回复收藏 0 原文

~没有更多了~