自动刷新div下一行

Question

I have a simple code with jquery and slim framework and here it is:

jquery:

var auto_refresh = setInterval(
function ()
{
$('#counter').load('/requests/autoloader').fadeIn("slow");
}, 5000);

/requests/autoloader route

$stat = 1;
$requests = $dbh->prepare("SELECT COUNT(*) FROM encashments WHERE status = ? ");
$requests->execute(array($stat));
$reqs = $requests->fetchColumn();
echo $reqs;

My html:

<li role="presentation"><a href="/user/admin/encashment/requests">Encashment Requests <div id="counter" style="color:red;"></div></a></li>

Everything is working fine, but I wonder why the div moves to the next line? Looks like this:

As you can see, the number is below the Encashment Requests link and I want it just to be beside it. How can I do it? Thank you.

Answer 1

Try setting #counter css property display to inline-block

 #counter { display:inline-block; } 

 <li role="presentation"><a href="/user/admin/encashment/requests">Encashment Requests <div id="counter" style="color:red;">3</div></a></li>