保持浮動元素在表格單元格內的一行內

我有表格裏面的一列是名稱和級別（數字） - 我想在左側名稱和級別「粘」到右側。列寬是動態的。如果有足夠的空間一切都很好，但在較小的屏幕上，它會造成醜陋的「斷線」 - 顯示在圖像上。有沒有人有一些想法如何保持在一行中的一切？保持浮動元素在表格單元格內的一行內

enter image description here

結構和風格（非常簡化的）

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

來源

2013-09-23 Johncze

是否有表固定寬度？ –

[小提琴]（http://jsfiddle.net/heera/z8krY/）。 –

你是否列固定寬度？ –

您可以設置正面右邊距爲錨和負左旁跨度：

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

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

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

來源

2013-09-23 22:21:10 Olexander

謝謝，這個作品非常好:) – Johncze

不客氣;） – Olexander

爲什麼這樣工作？我不明白 –

風格添加到您的列表中的特定列與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>標籤。

來源

2013-09-23 21:21:35

保持浮動元素在表格單元格內的一行內

回答

相關問題