CODEWITHSUNDEEP
csshyperlinkline-breaks
Cripi
Cripi

Reputation: 53

link in list brings linebreak

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

Upvotes: 1

Views: 36

Answers (2)

Rob Monhemius
Rob Monhemius

Reputation: 5144

You have to change the display: block behavior to display: inline behavior. (And remove the padding to make it look less weird.) I used !important to make sure the browser accepts that specific value; you should replace this with a higher specificity selector, the same specificity selector later in the pageload so it overwrites the old value or change the css file of the current selector.

.w3-navbar li a{
  display:inline !important;
  padding: 0px !important;
}
<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>

Upvotes: 0

user4759415
user4759415

Reputation:

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

Upvotes: 1

Related Questions