Replacing flex with table / table-cell

HTML-CSS
2

Why? What are you trying to achieve that the current code doesn’t do?

If it’s for browser compatibility you can use inline-block on the <li>s. Not sure what the purpose of the “Audio Player” text is inside the center <a> element but you will have to remove it or fix the <a>, one option is to use display: table; on it.

.wrape .nav {
  margin: 0;
  padding: 0;
  list-style: none;
  /* remove white space */
  font-size: 0;
}

.wrape .nav li {
  margin: 0;
  padding: 0;
  background: blue;
  /* set li to inline-block so they wrap */
  display: inline-block;
}

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
  /* fix for text inside the a element */
  display: table;
}
1 Like