html - Firefox CSS Float 和 NoWrap 错误

Question

所以我有几个<td> <table> 中的元素我希望所有元素都在同一行且不换行。我正在使用 CSS white-space: nowrap;默认情况下，所有元素都水平向左对齐，所以我也使用了一些 float:right;间隔一些元素。

这在 Chrome 中工作得很好，但在 Firefox 中它似乎添加了另一行并且它是一个奇怪的错误。如何在 FIREFOX 中将所有内容保持在同一行？

场景一

<td style="white-space: nowrap;">

    <a data-id="10796" data-pr="MOV1">AGG55TTYY</a>

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span> 
        <span style="font-size:11px; color:#cc0000;">2</span>
    </span>

</td>

场景 2 和 3

<td style="white-space: nowrap;">

   MOV3<span style="font-size:11px; color:#AAAAFF; font-weight:bold; float:right; vertical-align:middle;">#JJ655</span>

</td>

Answer 1

您可以通过向 anchor 添加 float left 来解决您的问题:

<table style="width:100%;">
  <td style="white-space: nowrap;">

    <a data-id="10796" data-pr="MOV1" style="float:left">AGG55TTYY</a>

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
    <span style="font-size:11px; color:#cc0000;">2</span>
    </span>

  </td>
</table>

或者在你的跨度之后放置你的 anchor

<table style="width:100%;">
  <td style="white-space: nowrap;">

    <span style="font-size:13px; color:#0fb124; font-weight:bold; float:right; vertical-align:middle;">
        <i class="fa fa-arrow-circle-up" aria-hidden="true"></i> <span style="color:#eeeeee;"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
    <span style="font-size:11px; color:#cc0000;">2</span>
    </span>

    <a data-id="10796" data-pr="MOV1">AGG55TTYY</a>

  </td>
</table>