Martin G. Martin G. - 3 months ago 13
CSS Question

What is wrong in this .css ? (bootstrap, css, sidebar)

I have a problem with labels in sidebars - they create a new line in left sidepanel

Screen shot for labels

They supost to be in the same line as "Approved" and "Unapproved" menu links.


This example of code comes from : Bootstrap 3 Tutorials [COMPLETE] - Building a blog admin video tut for beginners part 6 and 7


.css file :

.box {
border: 1px red dotted;
}

#side-menu {
background-color: #2f4050;
padding: 0px;
}

#side-menu h1 {
/*color: #1f3647; */
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 24px;
}

#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}


#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #9fb1c2;
font-weight: bold;
font-size: 13px;
display: block;
}


#side-menu .glyphicon {
margin-right: 6px;
}


.html

<li class="link">
<a href="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable box" id="collapse-comments">
<li>
<a href="approved.html">Approved</a>
<span class="label label-info pull-right box">17</span>
</li>
<li>
<a href="unapproved.html">Unapproved</a>
<span class="label label-warning pull-right">10</span>
</li>
</ul>
</li>


If I change
display:block;
to
display:inline-block;
its better :
Second screenshots for labels

but this time labels are little upper then they should be located. Another strange behavior is that articles label moved to left

Answer

Your a has display:block so its 100% width by default. a must have display set on inline or inline-block, like the spans :)