如何在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设置justify-content space-between或space-around ：

space-between
弹性物料均匀地分布在生产线上。 [...]

space-around
伸缩项均匀地分布在行中，两端均留有一半大小的空间。 [...]

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

Answer 2

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

 .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; }

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

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

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

问题描述

4 个解决方案

解决方案1
2 2016-03-04 18:35:29

解决方案2
1 2016-03-04 18:42:01

解决方案3
1

解决方案4
0 2016-03-04 20:27:42

嗨xD

您的CSS：

您的html：

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

问题描述

4 个解决方案

解决方案1 2 2016-03-04 18:35:29

解决方案2 1 2016-03-04 18:42:01

解决方案3 1

解决方案4 0 2016-03-04 20:27:42

嗨xD

您的CSS：

您的html：

解决方案1
2 2016-03-04 18:35:29

解决方案2
1 2016-03-04 18:42:01

解决方案3
1

解决方案4
0 2016-03-04 20:27:42