将两个div标签对齐在一行中

时间:2016-09-23 01:38:44

标签: html5

请参阅此页

http://www.radioclever.stream/

正如你所看到的那样输出:

  

Trenutno:你是Ellie Goulding - 你移动的方式   Slušaoci:
1 1

但我想要

  

Trenutno:Ellie Goulding - 你移动的方式   Slušaoci:1

我尝试了在stackoverflow上找到的任何东西,没有任何帮助。 这是源代码

        <div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Trenutno:</div><div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Changing song ...</div>
        <div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Slušaoci:</div><div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px"></div>

2 个答案:

答案 0 :(得分:0)

您可以使用float:left
这是怎么回事:

<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px; float:left;">Trenutno:</div>
<div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px; float:left;">Changing song ...</div>
<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;">Slušaoci:</div>
<div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px;"></div>

display: inline-block 这应该是这样的:

<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;display: inline-block;">Trenutno:</div>
<div class="onAir" id="track-title" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px;display: inline-block;">Changing song ...</div>
<div class="onAir" style="color:#fff;background:#0277bd;font-family:Montserrat;font-size:14px">Slušaoci:</div>
<div class="onAir" id="listeners" style="color:#fff;background:#0277bd;padding:0 10px 20px 10px;font-family:Montserrat;font-size:14px"></div>

答案 1 :(得分:0)

这里是带有容器的代码,为了避免重复每个<div>中的样式,我把它放在<div>容器的样式中

<div style=";background:#0277bd;color:#fff;font-family:Montserrat;font-size:14px;">
  <div class="onAir" style="display: inline-block;">Trenutno:</div>
  <div class="onAir" id="track-title" style="display: inline-block;">Changing song ...</div><br>
  <div class="onAir" style="display: inline-block">Slušaoci:</div>
  <div class="onAir" id="listeners" style="display: inline-block">1</div>
</div>

如果您想在中心

,请点击此处

<div style=";background:#0277bd;color:#fff;font-family:Montserrat;font-size:14px;text-align: center;">
  <div class="onAir" style="display: inline-block;">Trenutno:</div>
  <div class="onAir" id="track-title" style="display: inline-block;">Changing song ...</div><br>
  <div class="onAir" style="display: inline-block">Slušaoci:</div>
  <div class="onAir" id="listeners" style="display: inline-block">1</div>
</div>

如果您想要一行,请删除<br>