html - 空白 : nowrap not working with floats - Can't fit star rating into my table cell

Question

这是一个纯 css 问题，我有一个超过 13 列的表。表格是固定宽度的，每一列都使用百分比值设置(我不确定这是否是最好的方法)我在表格中有一个 5 星评级表。问题是我希望它像这样作为单个行内元素适合表格单元格

****

但无论我做什么，它都会根据表格进行大幅调整。这是js fiddle

http://jsfiddle.net/q5rfy4ea/1/

有人知道怎么解决吗？

Answer 1

您使用的组合听起来是正确的，但并不像您期望的那样起作用。

在 .rating:not(:checked) > label 中，您正在设置一个 float: right 属性，然后尝试强制执行一个 nowrap 使用 white-space:nowrap 的场景。尝试将规则更改为如下所示:

.rating:not(:checked) > label {
    display: inline-block; /* Go ahead and keep the rest the same */
    ...
}

Working JSFiddle