javascript - 使用 5-star CSS 解决方案，当屏幕在 330px 线下换行时无法点击第二行

Question

我使用的是专为移动设备设计的 5 星评级系统。在大多数手机上它工作正常，但有时手机的宽度记录为小于 330 像素，这会导致星形行换行，如下所示:

但是，如果您单击第 5 颗星，它不会注册。 “框”仍在上一行。

这是一个 JS fiddle ，您可以通过拖动右下角渲染框的宽度来查看它的效果:http://jsfiddle.net/yqj3bjLf/1/

这是相关的 CSS:

/* Change span immediately following the checked radio */
.rating input:checked + span {
    /*background-position: -22px 0;**
    background-position: -145px 0;*/
    background-position: -58px 0;
}

/* Reset all remaining stars back to default background.
   This supersedes the above due to its ordering. */

.rating input:checked + span ~ span {
    background-position: 0 0;
}

.star-grey:before {
    content: "\f000";
    font-family: FontAwesome;
    color: grey;
}

.star-yellow:before {
    content: "\f000";
    font-family: FontAwesome;
    color: #ffe43e;
}

我怎样才能解决这个问题？我已经尝试应用我自己的 CSS，但是当我尝试用新的、特定于页面的内联 @media 影响它们时，:before CSS 类似乎没有被使用> 查询。

Answer 1

很简单，将容器的display设置为inline-block，将white-space设置为nowrap .应该管用。我有同样的问题。

编辑:

.rating {
  display: inline-block !important;
  white-space: nowrap !important;
}

这是工作示例:http://jsfiddle.net/yqj3bjLf/7/