使用[white-space:no-wrap]的TD不像预期的那样工作？

Question

我有一个表格：

请看右侧的TD。

黄色div应该有其高度（必须）。我需要垂直对齐复选框+SPAN。

所以我将它们都设置为：float:left，并使用margin-top进行调整。

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

我已经添加了不换行的设置。

我不介意文本（td#2）会自动换行，我只需要 check-box +span 始终在一起。
但是我无法在包装器 div 上使用 width，因为这里的 “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中不会（这才是正确的方式）。

- Royi Namir

---

请将代码从JSbin转移到此处，这样问题将保持开放状态。目前它缺少一个[mcve]。 - double-beep

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

- Oleg Grishko

---

工作正常，无需操纵HTML结构。非常好。谢谢。 - Royi Namir

Answer 2

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

- Explosion Pills

---

已经修复，但在Firefox中仍存在问题（在chrome中正常）。http://jsbin.com/oquniq/8/edit - Royi Namir

我不知道如何更新jsbin，但是如果您从span/checkbox中删除“float：left”，则在FFX中已经修复了它。 - Explosion Pills

但是如果我去掉Float，我就不能操作margin-top等属性了... - Royi Namir

尝试在FF中调整span的垂直位置http://jsbin.com/oquniq/17/edit，但我没有成功（因为我按照你说的去掉了float）。 - Royi Namir

将 span 的样式更改为 display: inline-block 或在容器 div 上使用 padding。 - Explosion Pills

Answer 3

换行是由于元素被单独向左浮动造成的。

将复选框放在<span>中（或更好的方法是使用<label>元素），这样就可以解决问题了。此外，不需要浮动元素-您只需将其设置为display: block;即可。

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

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

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

- Mike

Answer 4

我建议您在那个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是语义化的，所以对于标签，请使用元素，这对世界来说更好:)

- audre7

---

是的，我已经把它表格化了，当然可以工作。我只是想知道应该怎么做才能修复它（并且拥有完全的控制权）。 - Royi Namir

所以我不明白问题出在哪里？你想让标签和输入框始终对齐，是吗？ - audre7