Separator in nav bar not centered between nav items

Question

I'm trying to have separators between my nav items and i've never had any luck. I finally figured out a way to only have borders between items but now they're stuck on the far right. I want them centered between the items. I can't figure out how to best word this question so I can't find answers online.

* {
  margin: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#signature {
  width: 300px;
  display: inline-block;
  margin-top: 100px;
  margin-left: 150px;
}

nav {
  display: flex;
  justify-content: space-around;
}

ul {
  list-style-type: none;
  display: flex;
  margin-top: 130px;
}

nav a {
  text-decoration: none;
  margin-right: 150px;
}

nav ul li {
  border-right: 1px solid #000;
}

nav ul li:last-of-type {
  border-right: none;
}

nav ul ul li {
  border-right: none;
}

<header>
  <img id="signature" src="img/signature.png">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>
</header>

side-note - if my code shows signs of sloppiness or bad habits please call them out thanks

Possible duplicate of [Separators For Navigation](https://stackoverflow.com/questions/5688791/separators-for-navigation) — MattHamer5, Oct 11 '19 at 12:51
Note: to increase the click target (and therefore make it easier for users to "hit" a link), I do recommend making the a `display: block`, which will cause it to fill up the space available in the `li` — random_user_name, Oct 11 '19 at 16:15

score 1 · Answer 1 · answered Oct 11 '19 at 15:53

1

Hey this is a different approach. It might help you if you do not want to use borders:


* {
    margin:0;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#signature {
    width: 300px;
    display: inline-block;
    margin-top: 100px;
    margin-left: 150px;
}

nav {
    display: flex;
    justify-content: space-around;
}

ul {
    list-style-type: none;
    display: flex;
    margin-top: 130px;
}

nav a {
    text-decoration: none;
    margin-right: 150px;
}
nav a::after{
    content: '|';
    margin-left: 150px;
  }

nav ul li:last-of-type a::after {
    content: ''
  }

answered Oct 11 '19 at 15:53

dlemm

61
1
5

Just providing a big dump of code without any explanation or comments is not very useful. What did you change / do? Why does it work? – random_user_name Oct 11 '19 at 16:09
Thanks for the advice. I'm going to be more precise the next time. The code I changed is at the bottom. Instead of `border` , I used `content`. – dlemm Oct 14 '19 at 07:10

score 1 · Answer 2 · answered Oct 11 '19 at 16:33

See the comments I've added to the code below to see what I've changed and why, but I've revised to get your desired behavior, as well as (per your request) pointing out some things to watch out for, or might be better practice.

/* be very careful about * selector styles.  margin / padding are about the only thing that's "safe" */

* {
  margin: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#signature {
  width: 300px;
  display: inline-block;
  margin-top: 100px;
  margin-left: 150px;
}

nav {
  /* display flex not doing much, switched to block */
  display: block;
}

ul {
  list-style-type: none;
  display: flex;
  /* cause li elements to be "full width" */
  justify-content: center;
  margin-top: 130px;
}

nav a {
  /* make this display block to increase click target size */
  display: block;
  /* necessary to make the content before styles work properly */
  position: relative;
  /* padding to create desired spacing */
  padding: 5px 10px;
  text-decoration: none;
  /* remove margin-right, causing oddness */
}


/* target only top level nav a elements */

nav ul>li+li a:before {
  content: '';
  border-left: 1px solid #888;
  position: absolute;
  /* adjust height to desired value */
  height: 16px;
  display: block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}


/* removed all the ul / li borders */

<header>
  <img id="signature" src="img/signature.png">
  <nav>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Contact</a></li>
    </ul>
  </nav>
</header>

Separator in nav bar not centered between nav items

2 Answers2