Comment placer un bouton à côté d'un titre?

Question

J'ai pensé utiliser float: right; résoudrait ce problème, mais il fait apparaître le bouton en dehors de la div. Comment résoudre ce problème?

[~ # ~] 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

Donne ton h1display: inline-block pour permettre à vos éléments d'occuper la même ligne ...

#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

Essayez comme ceci:

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

JSFIDDLE DEMO

ou vous pouvez utiliser le display:inline pour qu'ils apparaissent côte à côte.