Question

所以我在<td>中有一些<table>个元素，我希望所有元素在同一行上没有包装。我正在使用css white-space: nowrap;默认情况下，所有元素都水平对齐到左边，所以我也使用一些float:right;来区分一些元素。

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

方案1

<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

您可以通过向锚点添加float left来解决您的问题：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Firefox CSS Float和NoWrap Bug

1 个答案: