在CSS中的按鈕后面顯示的文字

Question

我在頁面頂部有一個菜單欄header 。

我的目標是在名為live_stats的div中的按鈕右側（應live_stats內聯顯示）中插入文本（在標題中垂直居中）。

到目前為止，我已經嘗試添加style='display:inline; 並且在css和html中都進行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>