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

Question

我正在寻找均匀分布链接之间的空间，因此每个占据包含div的1/3空间。他们在这个div中的全部原因是因为我想用旗帜排列，我不确定如何做到这一点。

这是一个小提琴： 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均匀分布在该行中。 [...]

  

• space-around
    Flex items均匀分布在行中，两端都有半角空格。 [...]

  

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

＆＃13;

＆＃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;
}
.navLinks {
  display: flex;
  padding: 0;
  justify-content: space-around;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我看到已发布了一个flexbox解决方案，因此我发布了table/table-cell解决方案。这是一个简单但有效的方法，您不必担心浏览器差异。

＆＃13;

＆＃13;

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}

#navBar {
  border: 1px solid black;
  width: 553px;
  margin: 0 auto;
}
/* set the container to act like a table */
.navLinks {
  display: table;
  table-layout: fixed; /* evenly space all elements */
  /* remove default styling */
  width: 100%;
  margin: 0;
  padding: 0;
}

.navLinks li {
  display: table-cell;/* set to a table-cell */
  text-align: center;
  font-size: 25px;
  padding: 10px; 
}

.navLinks a {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试此代码
正在为我工​​作

.bruceBanner img {
  border: 2px solid black;
  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
  border: 1px solid black;
  display: inline-block;
  font-size: 25px;
  width:32%;
}
#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>

Answer 4

hi xD

你的css：

.bruceBanner img {
  border: 2px solid black;

  height: 172px;
  width: 553px;
  display: block;
  margin: 0 auto;  /*After setting a width this will make object sit centrally within parent container. Auto sets left and right                                  margins equally. 0 denotes no top or bottom margin */

}


 .li1 { 
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;

} 
.li2 { 
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 { 
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */

#navBar {
  border: 1px solid black;
  width:553px;
  margin: 0 auto;
}

你的html：

<body>

  <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 class="li1"><a href='#'>About</a></li>
   <li class="li2"><a href='#'>Hours</a></li>
   <li class="li3"><a href='#'>Contact</a></li>
  </ul>
</nav> <!--#navBar-->
</body>