Come si posiziona un pulsante accanto a un'intestazione?

Question

Ho pensato che l'utilizzo di float: right; avrebbe risolto questo problema, ma rende il pulsante visualizzato al di fuori del div. Come lo risolvo?

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

Lascia la tua h1display: inline-block per consentire gli elementi di occupare la stessa riga ...

#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

Prova in questo modo:

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

JSFIDDLE DEMO

oppure è possibile utilizzare il display:inline in modo che appaiano side-by-side.