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

我认为使用

float:right

将修复此问题，但它会使按钮显示在div之外。如何解决此问题

HTML

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

试着这样做：

#主{
宽度：200px；
边框：1px点黑色；
}
h1{
保证金：0；
}
钮扣{
浮动：对；
}

标题按钮

给出您的

h1

显示：内联块，以允许您的元素占用同一行

#主{
宽度：200px；
边框：1px点黑色；
}
h1{
保证金：0；
显示：内联块；
}
钮扣{
浮动：对；
}

标题按钮

在我的例子中，我希望标题文本居中，因此我可以通过将“display:inline block”替换为“text align:center”来实现这一点。

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