見出しの横にボタンを配置するにはどうすればよいですか？

Question

float: right;はこれを修正しますが、ボタンがdivの外側に表示されるようにします。これをどうやって解決しますか？

[〜＃〜] 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

h1display: inline-blockエレメントが同じ行を占有できるようにする...

#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

このようにしてみてください：

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

JSFIDDLE DEMO

または、display:inlineを使用して、並べて表示することもできます。