So zeigen Sie eine Kopfzeile inline mit Absatztext mit divs oder einer alternativen Methode an

Ich habe dieses einfache Snippet in einem WordPress-Widget:

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

Der Name wurde aus Datenschutzgründen geändert. Gibt es eine Möglichkeit, diese in derselben Zeile erscheinen zu lassen?

Ich bin ein CSS-Dummy, aber ich habe versucht, Dinge zu tun wie:

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

Aber das funktioniert nicht aus Gründen, die für CSS-Gurus höchstwahrscheinlich offensichtlich sind.

Jede Anleitung, wie ich diese auf die gleiche Linie bringen kann, wäre sehr dankbar!

* AKTUALISIERTE LÖSUNG *

Für alle, die ähnliche Probleme haben, habe ich dies gerade verwendet – mit Hilfe von @antyrat und @jacefarm:

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

Auf diese Weise konnte ich das div anders gestalten als das p, und sie sind beide inline – und genau das wollte ich erreichen.

Inline-Stile auf HTML-Elementen werden als HTML-Attribute geschrieben. Sie würden das ‘style’-Attribut verwenden und ihm einen Wert geben, der in Anführungszeichen gesetzt ist. Außerdem muss nach jedem CSS ein Semikolon stehen.[property]: [value];’ -Paar an das ‘style’-Attribut übergeben, genau wie Sie es in einem Standard-CSS-Stylesheet tun würden.

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

Alternativ könnten Sie dem übergeordneten „div“-Element eine Klasse zuweisen, z. B. „title“, und dann die Tags „h3“ und „h2“ in Ihrem CSS-Stylesheet wie folgt formatieren:

HTML

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

CSS

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

Sie müssen verwenden style Attribut:

<div style="display:inline">

Laut der Spezifikation, die Sie suchen display:run-in wie in dieser StackOverflow-Frage beschrieben. Für Sie sähe das so aus:

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

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

Leider funktioniert dieses Code-Snippet nicht. Das liegt daran, dass praktisch die meisten Browser aufgegeben haben display:run-in, auch diejenigen, die es vorher hatten. Diese Funktion ist nicht produktionsbereit. Es wurde nie in Firefox unterstützt und wurde sowohl aus Safari (v8) als auch aus Chrome (v32) entfernt. Es beschreibt jedoch genau das typografische Verhalten, nach dem Sie fragen.

Diese Frage enthält Links zu anderen Threads, die Problemumgehungen ausprobiert haben.