Codes316 Codes316 - 6 months ago 26
HTML Question

inline-block will not change elements in my unordered list to horizontal display

I have three list items that are in a unordered list between some text. When I change the display to inline block it still keeps the vertical orientation. What is keeping the list items from being displayed horizontally?

div class="row">
<div class="icons">
<ul class="social">
<li><a href="#" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
<li><a href="#" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
<li><a href="#" class="button social"><i class="fa fa-fw fa-twitter"></i></a></li>
</ul>
</div>
</div>


Here is the CSS:

.social{
list-style: none;
display:inline-block;
}

Answer
 .social li{
   display:inline-block; 
  }

You need to put display:inline-block on li not on ul.