为什么评分星级要换行？

Question

我实现了rateYo的评分插件，我很喜欢。我很困惑为什么明星们坚持要闯入一个新的行列。我的 test-site 说明了问题。

我尝试使用 display: inline 和 inline-block 以及 whitespace: nowrap 设计 div 的样式，但都无济于事。我还尝试使用 display: inline 设计标签样式。没有与此问题相关的插件选项。我错过了什么？

<label for="min-rating" >Minimum Rating:</label>
<div id="min-rating"></div>

如果您选择否决这个问题，请说明原因，以便我从错误中吸取教训。

Answer 1

默认情况下，divs 有 display: block，这使得它从一个新行开始。如果您将此添加到您的 CSS，它将起作用：

#min-rating {
    display: inline-block;
}

Answer 2

也许您可以尝试将其插入 table

<table cellspacing=10>
  <tr>
    <td>
      <label for="min-rating" >Minimum Rating:</label>
    </td>
    <td>
      <div id="min-rating">****</div>
    </td>
  </tr>
</table>

注：我加了几个小星星 (****) 用于演示。如果你愿意，你可以删除它

为什么评分星级要换行？

Why do the rating stars start on a new line?

html

css

jquery

rateyo