圖標顯示在一行而不是列

Question

我看到這個問題已經存在，但我不能將這些答案應用於我的案件，它不適用於我。我試圖在一行中顯示這個圖標，一個挨着一個，但他們總是以列的形式完成。我該如何改變它？我不想使用bootstrap，也不想使用html5，只使用html。

<div class="row" style="margin:0px; padding: 0px;"> 
 
    <div class="status-icons-text-color temperature-data-icons"> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="first temperature"> 
 
     <img src="images/icons/first_temp_icon_outline_white.png" style="max-width:20px;"> 
 
     <div id="first_temp" style="padding-top: 10px; font-weight: bold;font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="second temperature"> 
 
     <img src="images/icons/second_temp_icon_white.png" style="max-height:20px;"> 
 
     <div id="second_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="Third temperature"> 
 
     <img src="images/icons/third_temp_white.png" style="max-height:20px;"> 
 
     <div id="third_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

股利標籤是塊級，這意味着它們將自動一樣寬它們的容器。這往往會使他們垂直疊加，如果你有幾個連續的。

我已經應用float: left;到您的第三級嵌套的div，這使得他們都內聯和浮動左。內聯意味着它們只與內容一樣大，向左漂浮會使它們從左邊開始疊加。

我還將第二種風格應用於最內層的div，以使它們內聯。

div > div.status-icons-text-color.temperature-data-icons > div { 
 
    float: left; 
 
} 
 
div > div.status-icons-text-color.temperature-data-icons > div > div{ 
 
    display: inline; 
 
}

<div class="row" style="margin:0px; padding: 0px;"> 
 
    <div class="status-icons-text-color temperature-data-icons"> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="first temperature"> 
 
     <img src="images/icons/first_temp_icon_outline_white.png" style="max-width:20px;"> 
 
     <div id="first_temp" style="padding-top: 10px; font-weight: bold;font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="second temperature"> 
 
     <img src="images/icons/second_temp_icon_white.png" style="max-height:20px;"> 
 
     <div id="second_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    <div align=c enter data-toggle="tooltip" data-placement="bottom" title="Third temperature"> 
 
     <img src="images/icons/third_temp_white.png" style="max-height:20px;"> 
 
     <div id="third_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div> 
 
    </div> 
 
</div>

如果你寧願沒有額外的CSS這項工作，你總是可以互換的div的跨度。

<span class="row" style="margin:0px; padding: 0px;"> 
 
    <span class="status-icons-text-color temperature-data-icons"> 
 
    <span align=c enter data-toggle="tooltip" data-placement="bottom" title="first temperature"> 
 
     <img src="images/icons/first_temp_icon_outline_white.png" style="max-width:20px;"> 
 
     <span id="first_temp" style="padding-top: 10px; font-weight: bold;font-size: 12pt;">-- °C</span> 
 
    </span> 
 
    <span align=c enter data-toggle="tooltip" data-placement="bottom" title="second temperature"> 
 
     <img src="images/icons/second_temp_icon_white.png" style="max-height:20px;"> 
 
     <span id="second_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</span> 
 
    </span> 
 
    <span align=c enter data-toggle="tooltip" data-placement="bottom" title="Third temperature"> 
 
     <img src="images/icons/third_temp_white.png" style="max-height:20px;"> 
 
     <span id="third_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</span> 
 
    </span> 
 
    </span> 
 
</span>

Answer 2

像這樣的事情？ （見註釋）

<div class="row" style="margin:0px; padding: 0px;"> 
 
    <div class="status-icons-text-color temperature-data-icons"> 
 
    <table> 
 
    <tr> 
 
     <td><div align=c enter data-toggle="tooltip" data-placement="bottom" title="first temperature"> 
 
     <img src="images/icons/first_temp_icon_outline_white.png" style="max-width:20px;"> 
 
     <div id="first_temp" style="padding-top: 10px; font-weight: bold;font-size: 12pt;">-- °C</div> 
 
    </div></td> 
 
    <td><div align=c enter data-toggle="tooltip" data-placement="bottom" title="second temperature"> 
 
     <img src="images/icons/second_temp_icon_white.png" style="max-height:20px;"> 
 
     <div id="second_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div></td> 
 
    <td><div align=c enter data-toggle="tooltip" data-placement="bottom" title="Third temperature"> 
 
     <img src="images/icons/third_temp_white.png" style="max-height:20px;"> 
 
     <div id="third_temp" style="padding-top: 10px; font-weight: bold; font-size: 12pt;">-- °C</div> 
 
    </div></td> 
 
    </tr> 
 
    </table> 
 
    </div> 
 
</div>