我使用的是专为移动设备设计的 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 类似乎没有被使用> 查询。
最佳答案
很简单,将容器的display
设置为inline-block
,将white-space
设置为nowrap
.应该管用。我有同样的问题。
编辑:
.rating {
display: inline-block !important;
white-space: nowrap !important;
}
关于javascript - 使用 5-star CSS 解决方案,当屏幕在 330px 线下换行时无法点击第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46965832/