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 ..我已更改了部分内容...我建议您从#header删除高度..请改用填充

Stack Snippet

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

显示在css的按钮后的文本

1 个答案: