Html 如何使用CSS内联元素

我正试图使菜单栏在我的网站顶部。 应该是这样的：

红方块是我的按钮

我的问题是我的标题和按钮不在同一行。所以我试着用一张桌子，但两张桌子都在左边对齐。 之后我使用了

float:right用于我的按钮。
现在，它已向右对齐，但在下一行中

我怎样才能修复它，使我的按钮和标题在同一行，并像我的图片一样对齐

HTML:

对于这种情况，您可以考虑使用<代码>位置<代码> S.

#顶栏{
位置：相对位置；
}
h1{
保证金：0；
颜色：#FFFFFF；
文本对齐：居中；
字体系列：Helvetica，无衬线；
字体大小：16px；
线高：44px；
背景：#99f；
}
#顶栏按钮{
高度：20px；
宽度：20px；
位置：绝对位置；
最高：50%；
右：5px；
利润上限：-10px；
}

时刻表
我建议您使用
absolute
和
translateY（）
将按钮垂直居中对齐

（注意：我在JSFIDLE上使用SCS，所以不要混淆语法）

说明：

我使用的是
位置：绝对
将按钮向右移动。至于垂直居中按钮，你可以使用<代码>顶部：50% 和<代码>转换<代码>，将你的按钮精确地垂直在头部的中间。它将始终保持垂直居中，而无需您声明任何静态
高度
赋予标题浮动属性

.classNameGiveToHeading {
  float: left;
}
.buttonClassName {
  float: right;
}

或者根据您的喜好将“float:right”分配给这两个选项。
下面是如何使用

演示：

缺点是包含一个空div。优点是，即使您放大或缩小、更改字体大小或按钮大小，无论发生什么情况，所有内容都将始终与中间对齐。根据我的经验，这比使用幻数值进行定位要简单。
出于您的兴趣，下面介绍如何使用内联块进行定位


div>*{
显示：内联块；
垂直对齐：中间对齐；
}
h1{
宽度：100%；
文本对齐：居中；
右边距：-40px；
背景色：#4F81BD；
颜色：#FFF；
字体系列：Helvetica，无衬线；
字体大小：16px；
高度：44px；
}
钮扣{
高度：30px；
宽度：30px；
右边距：-6px；
边框：3px实心#8C3836；
边界半径：5px；
背景色：#C0504D；
}

时刻表
我不认为在这里使用
绝对值
是一个好选择，
浮动
将处于空闲状态，我确信如果视口消失，OP不希望他的元素滚到按钮后面small@Mr.Alien正确的。我们还可以建议OP设置
最小宽度
或其他东西<代码>：）

它可以工作但不能缩放，如果有两个按钮怎么办？知道其他元素高度的CSS也是脆弱的。话虽如此，我还是把它用在了past@JuanMendes在这种情况下，我们可以使用

transform

。是的，因为我以前的事件，我也有过不好的点击率<代码>：）我真的不明白为什么人们不必要地否决投票。我准备根据你的期望修改我的答案。请大声说。这看起来像一辆混合动力车。使用

位置时

。。。嗯，我很困惑。这行吗？@PraveenKumar

relative

会有多余的标题，所以会移动到绝对位置，但他不必再使用任何静态高度来垂直居中按钮。@Paili既然你已经知道按钮高度，你不需要

转换

，而且这个愚蠢的Internet Explorer不支持这一点。哈哈。@Alien Man先生，你改变了答案？你给出的第一个答案很有趣，这就是为什么我对它感到好奇。这不起作用，因为根据要求，标题必须居中。

h1 {
  height: 44px;
  margin: 0;
  color:#FFFFFF;
  text-align: center;
  font-family: Helvetica, sans-serif;
  font-size: 16px; 
  line-height: 44px;
}
#topbar button {
  height: 20px;
  width: 20px;
  float: right;
}

header {
  height: 40px;
  background: tomato;
  position: relative;

  h4 {
    line-height: 40px;
    text-align: center;
  }

  button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
  }
}

.classNameGiveToHeading {
  float: left;
}
.buttonClassName {
  float: right;
}

<div class="bg-light-gray dt w-100">
  <div class="dtc v-mid w3"></div>
  <div class="dtc v-mid tc pv3">
    <h1 class="mv0 f5">Headline</h1>
  </div>
  <div class="dtc v-mid tr w3 pr2">
    <button class="bg-black br2 h2 w2"></button>
  </div>
</div>

.dt {
  display: table;
}

.dtc {
  display: table-cell;
}

.h2 {
  height: 2rem;
}

.w2 {
  width: 2rem;
}

.w3 {
  width: 4rem;
}

.w-100 {
  width: 100%;
}

.bg-black {
  background-color: #111;
}

.bg-light-gray {
  background-color: #eee;
}

.pr2 {
  padding-right: .5rem;
}

.pv3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.mv0 {
  margin-top: 0;
  margin-bottom: 0rem;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.f5 {
  font-size: 1rem;
}

.v-mid {
  vertical-align: middle;
}