html - 如何强制两个元素始终保持在同一行

Question

代码非常简单：

<table id="tabel_user" style="width: 100%; border: 0; background-color: white;" cellpadding="0" cellspacing="0">
<tr>
    <td style="border: 0; padding: 0; padding-left: 5px;">
        <label for="abcd"><input class="check_useri" id="abcd" name="abcd" type="checkbox" /> abcd </label>
    </td>
</tr>
</table> 

它们整齐地保持在同一行，除非标签中的文本变得非常长并且表格需要拉伸以适应它，然后文本有时会被强制低于复选框。我怎样才能阻止它这样做？

Answer 1

您可以使用 CSS 属性强制内联元素保持在同一行white-space：

<td style="white-space:nowrap;">
  this content will not be wrapped
</td>

Answer 2

此代码工作正常，并且响应迅速：

table {
width:100%;
display: inline-block;
}
td, th {
max-width:100%
}

Answer 3

定义 awhite-space可能是完成它的方法之一，但作为表格数据，如果您修复标签的最大宽度尺寸而不是更好

label { width: 100px; display: inline-block; }

Answer 4

你可以使用这个：<tr valign="top"> 这将使垂直对齐在顶部。