link in list brings linebreak

Question

I have a problem with w3css. When I add a link to a w3css navigation bar, it will come with a line break.

<link href="https://www.w3schools.com/lib/w3.css" rel="stylesheet">

<div class="w3-bottom" style="margin-bottom: 1px">
  <ul class="w3-navbar w3-red" style="float: clear;">
    <li style="margin-left: 2px">
      Powered by <a href="https://www.w3schools.com/w3css/">w3css</a> and <a href="http://fontawesome.io/">fontawesome</a> |
    </li>
  </ul>
</div>

I would like everything to be on one line. I hope you can help me, thanks. :)

//Cripi

Answer 1

This is a snippet of code that comes from the W3 css file you've included

.w3-navbar li a, .w3-navitem, .w3-navbar li .w3-btn, .w3-navbar li .w3-input {
   display: block;
   padding: 8px 16px;
}

If you edit the display property on that to be inline-block then things work as you'd expect.

Here is the code and an example link

.w3-navbar > li > a {
   display:inline-block !important;
}

You need the "!important" to overwrite their stylesheet which would have priority otherwise.

http://codepen.io/hoonin_hooligan/pen/Mpwqwm