I seem to be having an issue with navigation bar turning in-to random colors that I've not set-CodePudding

Alright, so my navigation bar used to be looking like this a few days ago:

But once I try to center the navigation bar to the middle, it turns in-to random colors and the spaces between the interactable buttons disappeared as shown in this picture:

I just tried to debug it and apparently it only happens when I put the display to inline-block. Am I doing anything wrong?

My CSS for the navigation bar:

.topnav {
  background-color: #ffffff;
  overflow: hidden;
}

.topnav a {
  float: center;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

My HTML for the navigation bar:

<div >
<a href=""><i  style="font-size: 30px"></i></a>
<a href=""><i  style="font-size: 30px"></i></a>
<a href=""><i  style="font-size: 30px"></i></a>
<a href=""><i  style="font-size: 30px"></i></a>
<a href=""><i  style="font-size: 30px"></i></a>
</div>

I removed the links for security reasons.

CodePudding user response：

this happens because the <svg> if nested inside <a> will behave like a link...
you know that a link with a text inside is always blue and with an underline

just color the SVG to the color you want, to solve the bug

I created a demo in a jfiddle, so you can try and learn :)

I hope it will help you, and learned something new

body svg {
  width: 5em;
}


/* color the svg, for not having this bug */

.with-success svg {
  color: black;
}

<div >
  <h2>with error</h2>

  <!-- 1 link -->
  <a href="#">
    <!-- stackoverflow SVG -->
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-overflow"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"></path></svg>
  </a>
  <!-- 2 link -->
  <a href="#">
    <!-- stackoverflow SVG -->
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-overflow"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"></path></svg>
  </a>
</div>

<hr>

<div >
  <h2>success</h2>

  <!-- 1 link -->
  <a href="#">
    <!-- stackoverflow SVG -->
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-overflow"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"></path></svg>
  </a>
  <!-- 2 link -->
  <a href="#">
    <!-- stackoverflow SVG -->
    <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="stack-overflow"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M290.7 311L95 269.7 86.8 309l195.7 41zm51-87L188.2 95.7l-25.5 30.8 153.5 128.3zm-31.2 39.7L129.2 179l-16.7 36.5L293.7 300zM262 32l-32 24 119.3 160.3 32-24zm20.5 328h-200v39.7h200zm39.7 80H42.7V320h-40v160h359.5V320h-40z"></path></svg>
  </a>
</div>