html - 如何在 div 内的内联链接之间均匀分配空间？

Question

我希望在链接之间平均分配空间，因此每个链接占用包含的 div 空间的 1/3。它们位于此 div 中的全部原因是因为我想将其与横幅对齐，否则我不确定该怎么做。

这是一个 fiddle : https://jsfiddle.net/yuy84gmq/13/

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks li {
  border: 1px solid black;
  display: inline;
  font-size: 25px;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}

<div class="bruceBanner">
  <a href="#">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
  </a>
</div>

<nav id="navBar">
  <ul class="navLinks">
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Hours</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
  </ul>
</nav>
<!--#navBar-->

Answer 1

使用 flexbox 并设置 justify-content至 space-between或 space-around :

• space-between
  Flex items are evenly distributed in the line. [...]

• space-around
  Flex items are evenly distributed in the line, with half-size spaces on either end. [...]

.navLinks {
  display: flex;
  justify-content: space-around;
}

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks li {
  border: 1px solid black;
  display: inline;
  font-size: 25px;
}
#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}
.navLinks {
  display: flex;
  padding: 0;
  justify-content: space-around;
}

<div class="bruceBanner">
  <a href="#">
    <img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
  </a>
</div>
<nav id="navBar">
  <ul class="navLinks">
    <li><a href='#'>About</a></li>
    <li><a href='#'>Hours</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
</nav>