Search code examples
javascriptrating

Javascript rating - result to same line

How can I get the result 1-5 in the same line, while hovering on circles?

Please see http://jsfiddle.net/3xLnxahq/

<div id="wrapper">
<div id="content">
        <ul id="rating">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>       
    </div>
    </div>
Solution

  • You defined a clear:left in the ratinginfo div. This means no other floating elements can be to the left of it, and so it's appearing as a sort of new line. Replace it with a float left declaration.

    Also the p tag is adding paragraph space which disrupts the float left declaration. Change the p tag to a div tag.

    Working fiddle http://jsfiddle.net/3L9rhqt0/

    New CSS:

    #ratinginfo {float:left; width:50px; margin-left:0px; }

    The new js:

        // Add the text to the rating info box
    $("<div />")
        .html($(this).html())
        .appendTo(ratingInfobox);