同行div div

對不起，提出這樣一個愚蠢的問題，但這是一個相當漫長的夜晚，我似乎無法讓我的代碼在同一行上顯示div。同行div div

我已經遍及堆棧溢出搜索，沒有答案已幫助。這可能是我犯過的一個非常愚蠢的錯誤，但我沒有注意到它。

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

來源

2013-05-01 Connormcwood

@dda您的大部分更正都是不需要的和不相關的 – Connormcwood 2013-05-01 04:23:25

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

來源

2013-05-01 04:28:40 Arbel

你的答案奏效。我很驚訝，我沒有想到我會變得如此愚蠢。謝謝阿貝爾。 – Connormcwood 2013-05-01 04:32:57

不客氣。很高興爲您提供幫助。 – Arbel 2013-05-01 04:34:29

注意：您需要使用'-moz-box-sizing：border-box;'才能在Firefox中使用它。 – ShZ 2013-05-01 04:38:35

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

來源

2013-05-01 04:24:25 cfreak

我想你需要內部<div class="sameline">的兩個div相鄰

出現這麼喜歡

.hbox, .mbox {float:left}

CSS規則應該這樣做

來源

2013-05-01 04:24:55 kevmc

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

（順便說一下，儘量避免在發佈CSS/HTML問題時發佈PHP，因爲這會讓代碼難以閱讀/解釋，儘管這裏不是太難。如有必要，從瀏覽器的源代碼中獲取HTML。）

還要注意的是sameline是一類，因此，除非你改變#到.這是不行的：

#sameline { 
    overflow: hidden; 
    white-space: nowrap; 
}

來源

2013-05-01 04:26:05

我使用php也是因爲我在PHP數據中回顯html內容。對不起，如果這使你或任何其他人困惑。 – Connormcwood 2013-05-01 04:32:23

如果添加float: left;到.mbox和.hbox它應該工作。示例here。

來源

2013-05-01 04:26:09 MISJHA

回答

相關問題