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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10008395/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:32:51  来源:igfitidea点击:

How can I force two elements to always stay on the same line in a <td>

htmlcss

提问by Bogdan

The code is pretty simple:

代码非常简单:

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

They stay neatly on the same line unless the text in the label gets really long and the table needs to stretch to accomodate it, then the text sometimes gets forced below the checkbox. How can I stop it from doing that?

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

回答by Lukas Eder

You can force inline elements to stay on the same line using the CSS property white-space:

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

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

回答by Starx

Defining a white-spacemay be one of the way to get it done, but as a tabular data, its better if you fix the max size of width of the label instead

定义 awhite-space可能是完成它的方法之一,但作为表格数据,如果您固定标签宽度的最大大小,则更好

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

回答by Sam Brooks

You can use this: <tr valign="top">This will make the vertical align at the top.

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

回答by Pablo Molina

This code works fine, and is responsive:

此代码工作正常,并且响应迅速:

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