put a materialize inline list

Asked

Viewed 725 times

4

I’m trying to put the list of social media icons inline on my footer, but I’m not succeeding. Does this change have to be done directly in the css of materialize? Follow code attached to help. Thank you

<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>

css materialize

  • In the CSS of list items display: inline; or display: inline-block;. You should never change the framework/template files, create one for your cost-effective CSS, and overwrite the previous one

2 answers

1

In his footer place display: inline.

footer ul li{
  display: inline;
}

See working on Jsfiddle

  • 1

    Boy, I was gonna put this on, but you were quicker on the trigger! kkk

0

You can create a class inline thus:

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

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

Browser other questions tagged css materialize

You are not signed in. Login or sign up in order to post.