Question

我正在尝试在导航项之间使用分隔符，但我从未有过运气。我终于想出了一种仅在项目之间设置边界的方法，但是现在它们位于最右边。我希望它们在项目之间居中。我不知道如何最好地表达这个问题，所以我无法在线找到答案。

* {
  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>

旁注-如果我的代码显示草率或不良习惯的迹象，请多谢他们

Answer 1

嘿，这是另一种方法。如果您不想使用边框，这可能会对您有所帮助：


* {
    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: ''
  }

Answer 2

请参阅我添加到以下代码中的注释，以查看更改的内容以及原因，但是我已进行了修改，以获取所需的行为，并（根据您的要求）指出一些注意事项或可能是更好的做法。

/* 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>

导航栏中的分隔符不在导航项之间居中

2 个答案: