如何在标题旁边放置一个按钮？

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

让您的h1 display: inline-block允许您的元素占据同一行......

＆＃13;

＆＃13;

#main {
  width: 200px;
  border: 1px dotted black;
}
h1 {
  margin: 0;
    display: inline-block;
}
button {
  float: right;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这样：

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

<强> JSFIDDLE DEMO

或者您可以使用display:inline，以便它们并排显示。