web-dev-qa-db-ja.com

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

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

22
Joe

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>
33
Turnip

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

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

JSFIDDLE DEMO

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

10
Rahul Tripathi