Wie neben h1 einen button setzen?

Guten Abend,

ich würde gerne einen button neben meiner h1 Überschrift einbauen, habe von float bis zu display: inline es versucht. Mit einer div-Box funktionierte es auch nicht, hätte jemand eine Idee was ich dafür verwenden muss ?

Answer 1

[Babelfish]

Auch wenn dir die Variante mit inline-block gefallen hat, würde ich dir doch dringend zu der Variante mit Flexbox raten, da dies deutlich flexibler ist und du auch später viel mehr damit anfangen kannst.

Hier eine Variante, wie sich das ganz leicht machen lässt:

HTML

<header>
 <h1>Meine Webseite mit Button</h1>
 <button>Drück mich!</button>
</header>

CSS

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

Beispiel

https://jsfiddle.net/Babelfisch/k3r9choz/6/

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[Pro334]

Starke Antwort, vielen lieben Dank !

Answer 2

[Baerenheini]

Diese zwei Optionen fallen mir auf Anhieb ein:

Option 1:

<div style="display: flex; flex-direction: row">
      <h1>Headline</h1>
      <button>Button</button>
</div>

Option 2:

<div>
      <h1 style="display: inline-block">Headline</h1>
      <button>Button</button>
</div>

Comments

[Pro334]

zweite Option hat geholfen, vielen Dank !

[Pro334]

@Pro334

kleine Nachfrage bitte: habe bei css decoration underline aber leider wird das nicht mehr angezeigt (bzw. nur ein kleiner Strich am Ende des Wortes), muss ich das nun im html einfügen ?

[Baerenheini]

@Pro334

text-decoration: unterline;

sollte immernoch für deine Überschrift funktionieren.

Was meinst du denn genau?

[Pro334]

@Baerenheini

Hat sich erledigt, nochmals vielen Dank für die Antwort !