Как поместить кнопку рядом с заголовком?

Я думал, что с помощью 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

15
css html position

2 ответов

дать свой h1 display: 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>
24

попробуйте так:

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

JSFIDDLE DEMO

или вы можете использовать display:inline так они появляются бок о бок.

6