相同的行div标签 [英] Same line div tags

问题描述

对不起，要问这样一个愚蠢的问题，但这是一个漫长的夜晚，我似乎无法让我的代码在同一行上显示div。

Sorry to ask such a stupid question, but it's been quite a long night and I cannot seem to get my code to display the divs on the same line.

我搜遍了Stack Overflow，没有任何答案有帮助。这可能是一个非常愚蠢的错误，但我没有注意到它。

I've searched all over Stack Overflow and none of the answers has helped. It might be a very stupid mistake I have done but I haven't noticed it.

<td>
  <div class='sameline'>
    <?php
      echo "<div class='hbox'>Max Health: $hp</div><div class='mbox'>Max Mana: $mana</div>";
    ?>
  </div>
</td>
.hbox {
  color:white;
  background: #dd0408; /* Old browsers */
  background: -moz-linear-gradient(top,  #dd0408 0%, #dd0408 0%, #bf0326 0%, #d30407 38%, #b20002 76%, #ba0003 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd0408), color-stop(0%,#dd0408), color-stop(0%,#bf0326), color-stop(38%,#d30407), color-stop(76%,#b20002), color-stop(100%,#ba0003)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd0408', endColorstr='#ba0003',GradientType=0 ); /* IE6-9 */
  text-align:center;
  width:45%;
  height:16px;
  border:1px solid #333;
}
.mbox {
  color:white;
  background: #00a4f7; /* Old browsers */
  background: -moz-linear-gradient(top,  #00a4f7 1%, #00b7f9 43%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#00a4f7), color-stop(43%,#00b7f9), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4f7', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
  text-align:center;
  width:45%;
  height:16px;
  border:1px solid #333;
}
#sameline {
  overflow: hidden;
  white-space: nowrap;
}

推荐答案

.hbox, .mbox {
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    display:inline-block;
}

这篇关于相同的行div标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！