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

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

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

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

Answer 3

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

Answer 4

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

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