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

Div标签是块级别，这意味着它们将自动与其容器一样宽。如果连续有几个，这往往会使它们垂直叠加。

我已将float: left;应用于您的第3级嵌套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

这样的东西？（见评论）

＆＃13;

{{1}}

＆＃13;

图标显示在一行而不是列

2 个答案: