将浮动元素保持在表格单元格内的一行中答案

【问题标题】：Keep floated elements in one line within table cell将浮动元素保持在表格单元格内的一行中
【发布时间】：2017-09-28 02:36:56
【问题描述】：

我有一个表格，其中一列是名称和级别（数字） - 我希望左侧的名称和级别“粘”到右侧。列的宽度是动态的。如果有足够的空间，一切都很好，但在较小的屏幕上，它会产生丑陋的“换行” - 如图所示。有谁知道如何将所有内容保持在一行中？

结构和风格（非常简化）

...
<td>
 <span class ="nowrap">
  <a style ="float:left;">Name</a>
  <span style ="float: right;" class ="level">10</span>
 </span>
</td>
...

【问题讨论】：

表格有固定宽度吗？
Make a fiddle.
列的宽度是固定的吗？
宽度设置为100%，表格内容由ajax加载

标签： html css html-table css-float

【解决方案1】：

您可以为锚点设置正的右边距，为跨度设置负的左边距：

.nowrap > a {
    margin-right: 30px;
}

.nowrap > span {
    margin-left: -30px;
}

看看它是如何工作的：http://jsfiddle.net/ZF8mh/

【讨论】：

【解决方案2】：

使用display: inline-block; 将样式添加到特定列的列表中喜欢

<td style="display:inline-block;">
    <span class="nowrap">
        <a style="float:left;">Name</a>
        <span style="float:right;" class="level">10</span>
    </span>
</td>

像我一样在<td>标签或<a>标签中应用样式。

【讨论】：