在 css 中按钮后面显示的文本

Question

我的页面顶部有一个菜单栏header。

我的目标是在名为 live_stats 的div 中将文本(在标题中垂直居中(插入按钮的右侧(应该一个接一个地内联显示(。

到目前为止，我已经尝试在 css 和 html 中添加style='display:inline;和inline-block，但这似乎不起作用。文本始终显示在按钮后面，并且始终显示在左上角。

我在 CSS 中做错了什么？如何创建一个div 或将一个类分配给与其左侧按钮直接相邻并内联的div？ 任何建议将不胜感激

在 javascript 中，有动态变量添加到div 中，只需使用

document.getElementById("live_stats").innerHTML = "foo : " + bar.length + baz.length

这是我到目前为止尝试过的：

window.onload = function() {
  var ref = document.getElementById("live_stats").innerHTML = "foo : ";
};

#header {
  position: absolute;
  top: 0px;
  width: 100%;
  line-height: 50px;
  height: 50px;
  background: rgba(12, 12, 12, 0.8);
  color: #eee;
  font: 16px/20px 'Open Sans', sans-serif;
  font-weight: 500;
  vertical-align: middle;
}
.btn {
  position: absolute;
  display: block;
  width: 34px;
  height: 34px;
  left: 8px;
  top: 8px;
  border-radius: 5px;
  border-width: 2px;
  cursor: pointer;
}
#live_stats {
  display: inline-block;
  line-height: 50px;
}

<div id='header'>
  <button id="buttonA" class='btn'></button>
  <button id="buttonB" class='btn'></button>
  <button id="buttonC" class='btn'></button>
  <div id="live_stats" style="display: inline;"></div>
</div>

Answer 1

无需使用position:absolute..我已经更改了您的一些css...我会建议从#header上去除高度.改用填充来调整

堆栈代码段

#header {
  background: rgba(12, 12, 12, 0.8);
  color: #eee;
  font: 16px/20px 'Open Sans', sans-serif;
  font-weight: 500;
  padding: 10px;
}
.btn {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border-width: 2px;
  cursor: pointer;
  vertical-align: middle;
}
#live_stats {
  display: inline-block;
}

<div id='header'>
  <button id="buttonA" class='btn'></button>
  <button id="buttonB" class='btn'></button>
  <button id="buttonC" class='btn'></button>
  <div id="live_stats">stats</div>
</div>