Michael Michael - 1 month ago 7
CSS Question

How to make two ul li elements inline?

I have this ul element in my page:

<ul class="nav pull-left" style="width: 90px; list-style-type: none;margin: 0; padding: 0;">
<li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> sites</a></li>
<li><a href="#" style="display: inline-block;text-align: center;"><i class="glyphicon glyphicon-tree-conifer"></i> <br> events</a></li>
</ul>


Here how it looks:

enter image description here

I need to change the appearance above and to make both elements inline:

enter image description here

I tried this example. But I didn't get desired result.Please help me to make to elements inline.

Answer

You have the "display:inline-block" style applied to the <A> tag, instead of the <LI> tag. Switch it over to the LI tag and it should look correct for you.

Also, you should probably try to avoid putting styles directly on tags like this, and instead use an attached stylesheet. Imagine you had to change 30 of these, that'd be a huge pain. If you had a stylesheet, you'd only have to change one small line.

Comments