如何在标题旁边放置按钮? [英] How do I place a button next to a heading?

问题描述

我认为使用 float: right; 可以解决这个问题，但它会使按钮出现在 div 之外.我该如何解决这个问题?

HTML

<h1>标题</h1><按钮>按钮</按钮>

CSS

#main {宽度:200px；边框:1px 黑色虚线；}h1{边距:0；}按钮 {浮动:对；}

JSFiddle

解决方案

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

#main {宽度:200px；边框:1px 黑色虚线；}h1{边距:0；显示:内联块；}按钮 {浮动:对；}

<h1>标题</h1><按钮>按钮</按钮>

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

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

解决方案

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

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

这篇关于如何在标题旁边放置按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！