Html 如何使用 div 或替代方法显示带有段落文本的内嵌标题

How to display a header inline with paragraph text using divs or an alternative method

提问by Jason Weber

I have this simple snippet in a WordPress widget:

我在 WordPress 小部件中有这个简单的片段：

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

The name is changed for privacy. Is there any possible way I get get these to appear on the same line?

为了隐私而更改名称。有什么可能的方法让这些出现在同一行上？

I'm a CSS dummy, but I've tried doing things like:

我是一个 CSS 傻瓜，但我试过做这样的事情：

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

But this doesn't work for reasons that are most likely obvious to CSS gurus.

但这对 CSS 大师来说最有可能显而易见的原因不起作用。

Any guidance in how I can achieve putting these on the same line would be greatly appreciated!

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

* UPDATED SOLUTION *

* 更新的解决方案 *

For anybody with similar issues, I just used this -- with the help of @antyrat and @jacefarm:

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

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

That way, I was able to style the div differently than the p, and they're both inline -- which is precisely what I was attempting to achieve.

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

回答by jacefarm

Inline styles on HTML elements are written as HTML attributes. You would use the 'style' attribute and give it a value that is wrapped in quotes. Also, you need to have a semi-colon after each CSS '[property]: [value];' pair passed into the 'style' attribute, just like you would in a standard CSS stylesheet.

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>

Alternatively, you could assign a class to the parent 'div' element, such as 'title', and then style the 'h3' and 'h2' tags in your CSS stylesheet, like this:

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

HTML

HTML

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

CSS

CSS

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

回答by antyrat

You need to use styleattribute:

您需要使用style属性：

<div style="display:inline">

回答by Merchako

According to the spec, you're looking for display:run-inas described in this StackOverflow question. For you, that would look like:

根据规范，你正在寻找display:run-in在描述这个StackOverflow的问题。对你来说，这看起来像：

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

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

Unfortunately, that code snippet won't work. That's because, practically, most of the browsers have abandonded display:run-in, even ones that previously had it. This feature is not ready for production. It's never been supported in Firefox, and it was removed from both Safari (v8) and Chrome (v32). It does, however, describe exactly the typographical behavior you're asking for.

不幸的是，该代码片段不起作用。那是因为，实际上，大多数浏览器已经放弃了display:run-in，即使是以前拥有它的浏览器。此功能尚未准备好用于生产。它从未在 Firefox 中受支持，它已从 Safari (v8) 和 Chrome (v32) 中删除。但是，它确实准确地描述了您要求的排版行为。

This question gives links to other threadsthat have tried workarounds.

此问题提供了指向已尝试解决方法的其他线程的链接。