0

很抱歉问了这么一个愚蠢的问题，但这是一个漫长的夜晚，我似乎无法让我的代码在同一行显示 div。

我已经搜索了整个 Stack Overflow，但没有一个答案有帮助。这可能是我犯的一个非常愚蠢的错误，但我没有注意到。

<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;
}
4

5 回答 5

1 
.hbox, .mbox {
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    display:inline-block;
}
于 2013-05-01T04:28:40.203 回答
0

添加float:left到 .mbox 和 .hbox。

于 2013-05-01T04:24:25.600 回答
0

我认为你需要里面的两个 div<div class="sameline">彼此相邻出现

所以像这样的CSS规则

.hbox, .mbox {float:left}

应该这样做

于 2013-05-01T04:24:55.060 回答
0

只需添加.sameline div {float: left;}.

（顺便说一句，在询问 CSS/HTML 问题时尽量避免发布 PHP，因为这会使阅读/解释代码变得更加困难，尽管在这里并不太难。如有必要，请从浏览器的源代码中获取 HTML。）

另请注意，这是一个类，因此除非您将其更改为 a sameline，否则这将不起作用：#.

#sameline {
  overflow: hidden;
  white-space: nowrap;
}
于 2013-05-01T04:26:05.757 回答
0

if you add float: left; to .mbox and .hbox it should work. Example here.

于 2013-05-01T04:26:09.320 回答