使用5星CSS解决方案，当330px线下的屏幕包裹并且无法点击第二行时

Question

我正在使用专为移动设备设计的5星评级系统。在大多数手机上它工作正常，但有时手机的宽度注册小于330px，导致一排星星包裹，如下所示：

但是，如果点击第5颗星，则不会注册。 “框”仍在前一行。

这是一个JS小提琴，你可以通过拖动右下角的渲染框的宽度来看到它的效果：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，但是当我尝试用新的，特定于页面的内联:before查询来实现它们时，@media CSS类似乎没有采用。

Answer 1

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

编辑：

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

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

Answer 2

我建议将.rating容器的最小宽度设置为至少75px。我尝试了上述解决方案以及我发现的其他一些解决方案，但这对我有用。