Question

可能是一个愚蠢的问题，但因为CSS不是我最好的一面，我无法弄清楚这一点。我得到了第二个结构：

<div>
  <span class="span-chb">
    <input type="checkbox" id="special-chb" name="special-exist">
    <label for="special-chb">Special exist, bla bla bla...</label>
    <span class="tooltip">
      <span>tooltip-text</span>
    </span>
  </span>
</div>

它们排成一行：

.span-chb {
  height: 22px;
  display:inline-block
}

我的问题是当div调整大小时（确定，它必须在页面大小更改时更改大小）工具提示跨度跳转到新行。如果我使div更小，标签文本正在移动，但元素本身仍然存在。

我想要实现的目标是不在任何地方移动工具提示或输入，但仍然允许标签文本移动到新行。我得到的最接近的结果是将white-space: nowrap;添加到span-chb，但这会阻止标签文本跳转（基本上它的宽度会停止更改大小）。将white-space: normal;添加到标签会在工具提示跨度放置到最后一个标签行时添加问题。

我该怎么做才能解决这个问题？

Answer 1

我相信display:table可能有助于解决此问题。

尝试使用以下CSS：

.span-chb {
  height: 22px;
  display: table;
}
.span-chb * {
  display: table-cell;
  vertical-align: middle;
}
.tooltip {
  white-space: nowrap;
}

Answer 2

表可能会有帮助。

＆＃13;

.span-chb {
  height: 22px;
  display:inline-block
}

＆＃13;

<div>
  <span class="span-chb">
    
    
    <table style="width:100%">
      <tr>
        <th>
          <input type="checkbox" id="special-chb" name="special-exist">
          <label for="special-chb">Special exist, bla bla bla...</label>
          </th>
        <td>
          <span class="tooltip">
            <span>tooltip-text</span>
          </span></td>
      </tr>
      </table>
  </span>
</div>

＆＃13;

如何防止最后一个元素移动？

2 个答案: