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

I thought using float: right; would fix this, but it makes the button appear outside of the div. How do I solve this?

我以为使用浮动:对;会修复此问题,但它会使按钮显示在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

2 个解决方案

#1

Give your h1 display: inline-block to allow your elements to occupy the same row...

给你的h1显示: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>

#2

Try like this:

试试这样:

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

JSFIDDLE DEMO

or you can use the display:inline so they appear side-by-side.

或者您可以使用显示:内联,因此它们并排显示。