put an inline list materialize

4

I'm trying to put the list of inline social networking icons in my footer, but I'm not getting success. Does this change have to be made directly in the materialize css? Follow the code attached to help. Thanks

<footer class="page-footer yellow darken-4">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!"><i class="fa fa-vimeo fa-2x" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>
    
asked by anonymous 23.09.2016 / 05:19

2 answers

1

In your footer put display: inline .

footer ul li{
  display: inline;
}

See working at JsFiddle

    
07.10.2016 / 15:28
0

You can create a inline class like this:

.inline li{
  display: inline;
  list-style-type: none;
}

Then, just call this class on your <ul> , as in this fiddle

    
07.10.2016 / 14:35