4

我有一张桌子：

在此处输入图像描述

请看正确的TD。

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

所以我把它们都当作 :float:left和玩了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 中它没有（它应该是这样的）。

4

4 回答 4

4

试试这个：http: //jsbin.com/oquuniq/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;
}
于 2013-02-17T17:17:05.463 回答
2

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

于 2013-02-17T16:16:05.890 回答
0

换行的原因是元素单独向左浮动。

将复选框放在<span>（或最好是一个<label>元素）中，这将修复它。也不需要浮动元素 - 你可以做到display: block;。

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

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

.mySpan{
    display: block;
    margin-top: 12px;
}
于 2013-02-17T16:35:13.043 回答
0

我建议你在那个 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>

PS：HTML是语义的，所以对于标签，使用标签元素，这对世界更好:)

于 2013-02-17T16:35:48.337 回答