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

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;
}

Answer 1

这样试试：

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

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

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

Answer 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>

Answer 3

另一个不错的选择是 flexbox 像这样使用：

#main {
  width: 200px;
  border: 1px dotted black;
  display:flex;
}
h1 {
  margin: 0;
}

您可以选择像这样添加 justify-content:space-between

#main {
  width: 200px;
  border: 1px dotted black;
  display:flex;
  justify-content:space-between
}
h1 {
  margin: 0;
}

或选择任何其他 flexbox 属性

How do I place a button next to a heading?