将浮动元素保留在表格单元格中的一行中

Question

我有一个表，其中一列是名称和级别（数字） - 我想在左侧的名称和水平“粘”到右侧。 列的宽度是动态的。 如果有足够的空间，一切都很好，但在较小的屏幕上，它会造成丑陋的“断线” - 显示在图像上。 有没有人知道如何把所有东西都放在一行？

结构和风格（非常简化）

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

Answer 1

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

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

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

了解它的工作原理：http://jsfiddle.net/ZF8mh/

Answer 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>标记。