Why do the rating stars start on a new line?

Question

I have implemented rateYo's rating plug-in, which I really like. I am confounded by why the stars insist on breaking into a new line. My test-site illustrates the problem.

I tried styling the div with display: inline and inline-block as well as whitespace: nowrap to no avail. I also tried styling the label with display: inline. There isn't an option for the plugin relating to this issue. What am I missing?

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

If you elect to downvote this question, please include a reason so I can learn from my mistakes.

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example.](http://stackoverflow.com/help/mcve) — rockerest, Jun 06 '16 at 02:36

score 2 · Accepted Answer · answered Jun 06 '16 at 01:20

2

By default, divs have display: block which makes it start on a new line. If you add this to your CSS it will work:

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

answered Jun 06 '16 at 01:20

J Delaney

589
4
17

I did try that, but the stars still stubbornly break onto a new line. – ron tornambe Jun 06 '16 at 01:30
@rontornambe I don't know what's causing it then, sorry. When I use Chrome DevTools to make the change it works: http://i.imgur.com/kzrHPKK.png – J Delaney Jun 06 '16 at 01:39
Thanks. Another clue to investigate. – ron tornambe Jun 06 '16 at 01:47
I found some CSS from another rating plugin I tried that was interfering with the rateYo plugin. Thanks heaps. – ron tornambe Jun 06 '16 at 01:50

score 0 · Answer 2 · answered Jun 06 '16 at 01:48

0

Perhaps you could try to insert it in a table

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

Note: I added a few little stars (****) for demonstration. you may remove it if you wish

answered Jun 06 '16 at 01:48

Ronnie Matthews

473
4
13

Thanks Ronnie, but I found the problem. See the accepted answer. – ron tornambe Jun 06 '16 at 01:51

Why do the rating stars start on a new line?

2 Answers2