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

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; 使用like将样式添加到特定列的列表中

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