Html 同一行div标记
很抱歉问这么愚蠢的问题,但这已经是一个漫长的夜晚,我似乎无法让我的代码在同一行上显示div 我已经搜索了整个堆栈溢出,但没有一个答案有用。这可能是我犯的一个非常愚蠢的错误,但我没有注意到Html 同一行div标记,html,css,Html,Css,很抱歉问这么愚蠢的问题,但这已经是一个漫长的夜晚,我似乎无法让我的代码在同一行上显示div 我已经搜索了整个堆栈溢出,但没有一个答案有用。这可能是我犯的一个非常愚蠢的错误,但我没有注意到 <td> <div class='sameline'> <?php echo "<div class='hbox'>Max Health: $hp</div><div class='mbox'>Max Mana: $man
<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;
}
将float:left
添加到.mbox和.hbox中。我想您需要
中的两个div相邻显示
所以一个css规则
.hbox, .mbox {float:left}
应该这样做只需添加.sameline div{float:left;}
(顺便说一句,在询问CSS/HTML问题时,尽量避免发布PHP,因为这会使阅读/解释代码变得更加困难,尽管这里不太难。如果需要,从浏览器的源代码获取HTML。)
还要注意的是,sameline
是一个类,因此除非将#
更改为
,否则这将不起作用:
#sameline {
overflow: hidden;
white-space: nowrap;
}
如果添加float:left
到.mbox
和.hbox
应该可以工作。
示例。@dda您的大多数更正都是不必要的,不相关的,我也在使用php,因为我是在重复php数据中的html内容。如果这让你或其他人感到困惑,很抱歉。你的答案有效。我很惊讶我没有想到我会这么愚蠢。谢谢Arbel。注意:您需要使用-moz-box-size:border-box
使其在Firefox中工作。
.hbox, .mbox {
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
display:inline-block;
}