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

Question

我有一张桌子：

请看右边的TD。

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

所以我将它们都放在：float:left并使用margin-top播放。

但是当我缩小浏览器宽度时，SPAN会下降：

我已经放了no-wrap。

我不在乎文本（td＃2）将被包裹我只需要check-box + span将在一起 - 总是。
我不能在包装器div上使用width因为这里的Yes是英文的，但它是一个多语言网站。所以我需要将文本作为其原始长度。

我能做什么，这两个元素都不会被包裹？

这是 jsbin 。 Here it is

这就是问题所在：

在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;
}

Answer 2

规则的名称为nowrap而不是no-wrap。

Answer 3

我建议你在那个td中放一张表，所以它不会包装

<td style='white-space:no-wrap;'>

<table style='white-space:no-wrap;height:50px;background-color:yellow;'>

          <tr>
            <td> <label  class='mySpan'>Yes</label></td>
            <td><input type='checkbox' class='myCheck' /></td>

          </tr>
<table>

</td>

P.S：HTML是语义的，所以对于标签，使用标签元素，这对世界更好：）

Answer 4

突破到一条新线上的是左边单独浮动的元素。

将复选框放在<span>（或更好的是<label>元素）中，这将解决它。此外，不需要浮动元素 - 您可以将其设为display: block;。

<label  class='mySpan'>
    <input type='checkbox' class='myCheck' />
    Yes
</label>

删除.myCheck样式并将.mySpan CSS设置为：

.mySpan{
    display: block;
    margin-top: 12px;
}