Wie platziere ich einen Button neben einer Überschrift?

Question

Ich dachte, mit float: right; würde dies beheben, aber es macht die Schaltfläche außerhalb des div angezeigt. Wie löse ich das?

HTML

<div id="main"> 
    <h1>Title</h1> <button>Button</button> 
</div> 

CSS

#main { 
    width: 200px; 
    border: 1px dotted black; 
} 
h1 { 
    margin: 0; 
} 
button { 
    float: right; 
} 

JSFiddle

Answer 1

Geben Sie Ihre h1display: inline-block Ihren Elemente zu ermöglichen, die gleiche Zeile zu besetzen ...

#main { 
 
    width: 200px; 
 
    border: 1px dotted black; 
 
} 
 
h1 { 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 
button { 
 
    float: right; 
 
}

<div id="main"> 
 
    <h1>Title</h1> <button>Button</button> 
 
</div>

Answer 2

wie diese versuchen:

<div id="main"> 
    <h1> Title <button>Button</button></h1> 
</div> 

JSFIDDLE DEMO

oder können Sie die display:inline verwenden, so erscheinen sie Seite an Seite.