使用h5内联显示自定义div

Question

我知道这听起来很简单，但这真的让我很烦。我已经在网上研究过了，还没有找到一个完美的答案。

我有这个html代码：

<h5 class="start-online"><div id="online_ajax">0</div> Clients online </h5>

我希望online_ajax div在客户端联机文本之前显示内联。

我目前的css是：

h5.start-online {
    text-align: center;
    font-size: 11px;
}

.online_ajax {
    position: relative;
    display: inline-block;
}

Answer 1

您不能在<div>中嵌套<h5>。句号。改为<span>。

<h5 class="start-online"><span id="online_ajax">0</span> Clients online </h5>

你甚至不需要给它定型！<span>标记是<div>标记的内联版本(就像<div>标记是<span>的内联版本一样)。

此外，在您的CSS中，您应该选择id和#是ID选择器。

#online_ajax {
  position: relative;
  display: inline-block;
}

但是是的，正如我之前说过的，请不要使用<div>。

Answer 2

你犯了个错误。

online_ajax是一个id，使用#而不是dot(.)

Answer 3

如前所述:您应该使用<span>而不是<div>。然后，您不再需要display: inline-block;在您的css。