带有 [white-space:no-wrap] 的 TD 未按预期工作？

Question

我有一张桌子：

请查看正确的TD。

黄色 div 应该有其高度（强制）。我需要垂直对齐checkbox+SPAN

所以我把它们都写成：float:leftand Played with margin-top。

但是当我减小浏览器宽度时，宽度SPAN会减小：

我已经把无包装了。

我不在乎文本 (td#2 ) 是否会被换行，我只需要check-box+span始终在一起。
我不能width在包装 div 上使用 a，因为这里Yes是英文的，但它是一个多语言网站。所以我需要将文本调整为原始长度。

我该怎么做才能使这两个元素都不会被包裹？

这是jsbin。这里是

td{
  border:solid 1px green;
}

.myCheck{
  float:left;
  margin-top:16px;
}


.mySpan{
  float:left;
  margin-top:12px;
}

<table style='width:100%;' cellspacing=0 cellpadding=0>
  <tr>
    <td>
      1
    </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut labore et 
    </td>
    <td style='white-space:nowrap;'>
      <div style='white-space:nowrap; height:50px;background-color:yellow;float:left;'>
        <input type='checkbox' class='myCheck' />
        <span  class='mySpan'>Yes</span>
      </div>
    </td>

  </tr>
</table>

问题是这样的：

在 Firefox 中，它确实包装它，但在 Chrome 中却没有（这应该是这样的）。

Answer 1

试试这个： http: //jsbin.com/oquniq/26/edit

<td style='white-space:nowrap;'>
  <label>
    <input type='checkbox' />
    <span class='mySpan'>
      Yes
    </span>
  </label>
</td>

并用于position:relative调整文本的垂直对齐

.mySpan
{
  position:relative;
  top:-2px;
}