Question

我想在包含的＆＃39; banLinks＆＃39中均匀分隔3个链接（＆＃39;关于＆＃39;，＆＃39;时间＆＃39;＆＃39;联系＆＃39;） ; DIV。我不想使用任何类型的列表。

我希望每个链接均匀分布，占其容器的1/3。我是HTML和CSS的新手，我不知道如何做到这一点。

我认为这样做的一种方法可能是将div容器的宽度除以3，考虑字体大小，然后以某种方式设置边距。但对我来说这似乎有些不合时宜，我不确定这是否已经完成了。

<body>
<div id="wrapper">



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

<nav>
<div class="banLinks">
 <a id="about" href="#">About</a>
 <a id="hours" href="#">Hours</a>
 <a id="contact" href="#">Contact</a>
</div> </nav>


 </div><!-- .wrapper-->
</body>

CSS：

#wrapper {

} 

.bruceBanner img {
border: 2px solid black;

height: 172px;
width: 553px;
display: block;
margin: 0 auto;  
}

.banLinks {
border: 2px solid black;
width: 553px;
text-align: center;
margin: 0 auto;
}


#about, #hours, #contact  {
font-size: 20px;
border: 2px solid blue;

}

这是一个jsfiddle。 https://jsfiddle.net/yuy84gmq/6/

Answer 1

将此添加到样式：

.banLinks {
  border: 2px solid black;
  width: 553px;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
.banLinks a{
  width: calc(33% - 4px);
  display: inline-block;
  margin: 0;
}

Answer 2

使用显示表

.banLinks {
  display:table;
  table-layout:fixed;
  border: 2px solid black;
  width: 553px;
  text-align: center;
  margin: 0 auto;

} 
.banLinks a {
  display:table-cell;
}

这是小提琴：https://jsfiddle.net/yuy84gmq/8/

Answer 3

这里有几个选项......假设有足够的宽度，两者都可以正常工作......假设有足够的宽度。

<强>显示：表细胞

＆＃13;

.banLinks {
  border: 2px solid black;
  width: 553px;
  text-align: center;
  margin: 0 auto;
  display: table;
}
.banLinks a {
  display: table-cell;
  border: 1px solid grey
}

＆＃13;

<div class="banLinks">
  <a id="about" href="#">About</a>
  <a id="hours" href="#">Hours</a>
  <a id="contact" href="#">Contact</a>
</div>

＆＃13;

<强> Flexbox的

＆＃13;

.banLinks {
  border: 2px solid black;
  width: 553px;
  text-align: center;
  margin: 0 auto;
  display: flex;
}
.banLinks a {
  flex: 1;
  border: 1px solid grey
}

＆＃13;

<div class="banLinks">
  <a id="about" href="#">About</a>
  <a id="hours" href="#">Hours</a>
  <a id="contact" href="#">Contact</a>
</div>

＆＃13;

Answer 4

你可以使用flexbox来做到这一点。如下所示：

.banLinks {
  border: 2px solid black;
  width: 553px;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: space-around; //or space-between whatever you like best


}

JSfiddle：https://jsfiddle.net/yuy84gmq/10/ flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

而不是通常的a链接，将它们放入列表中，并将列表设置为内联。然后，您可以将余量应用于列表项以将其分隔开来。

HTML

<nav>
<ul class="banLinks">
 <li><a id="about" href="#">About</a></li>
 <li><a id="hours" href="#">Hours</a></li>
 <li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>

CSS

.banLinks li { display:inline-block;margin:0 10px;} /* Adjust left/right margin as appropriate */

如何在导航栏div中均匀分隔这些链接？

5 个答案: