图标显示在一行而不是列

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>