如何使用 div 或替代方法显示与段落文本内联的标题

Question

我在 WordPress 小部件中有这个简单的 sn-p：

 <h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2>

为了隐私，更改了名称。有什么方法可以让这些出现在同一行吗？

我是一个 CSS 假人，但我尝试过这样做：

 <div display:inline><h3>Kevin Smith</h3><h2>The Official Kevin Smith Website</h2></div>

但这不起作用，原因很可能对 CSS 专家来说很明显。

任何关于如何实现将这些放在同一条线上的指导将不胜感激！

* 更新解决方案 *

对于任何有类似问题的人，我只是在 @antyrat 和 @jacefarm 的帮助下使用了这个：

<div style="display:inline">Kevin Smith</div><p style="display:inline">The Official  
Kevin Smith Website</p>

这样，我能够以不同于 p 的方式设置 div 的样式，并且它们都是内联的——这正是我试图实现的目标。

Answer 1

HTML 元素的内联样式被编写为 HTML 属性。您将使用 'style' 属性并给它一个包含在引号中的值。此外，您需要在每个 CSS '[property]: [value];' 之后有一个分号pair 传递到 'style' 属性中，就像在标准 CSS 样式表中一样。

    <div>
       <h3 style="display: inline;">Kevin Smith</h3>
       <h2 style="display: inline;">The Official Kevin Smith Website</h2>
    </div>

或者，您可以为父“div”元素分配一个类，例如“title”，然后在 CSS 样式表中设置“h3”和“h2”标签的样式，如下所示：

HTML

    <div class="title">
       <h3>Kevin Smith</h3>
       <h2>The Official Kevin Smith Website</h2>
    </div>

CSS

    .title h2,
    .title h3 {
      display: inline;
    }

Answer 2

你需要使用style属性：

<div style="display:inline">

Answer 3

根据规范，您正在寻找display:run-in，如this StackOverflow question 中所述。对你来说，这看起来像：

h2 { display:run-in; }
p  { display:block; } // default

<h2>Kevin Smith</h2>
<p>The Official Kevin Smith Website</p>

很遗憾，该代码 sn-p 不起作用。那是因为，实际上，大多数浏览器都放弃了display:run-in，即使是以前拥有它的浏览器。这个功能是not ready for production。 Firefox 从未支持它，它已从 Safari (v8) 和 Chrome (v32) 中删除。但是，它确实准确地描述了您要求的排版行为。

这个问题给出了已经尝试过解决方法的links to other threads。