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

时间:2016-03-04 16:21:25

标签: css

我想在包含的' banLinks&#39中均匀分隔3个链接('关于','时间''联系') ; 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/

5 个答案:

答案 0 :(得分:0)

将此添加到样式:

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

答案 1 :(得分:0)

使用显示表

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

答案 2 :(得分:0)

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

<强>显示:表细胞

&#13;
&#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;
&#13;
&#13;

<强> Flexbox的

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:0)

你可以使用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/

答案 4 :(得分:-1)

而不是通常的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 */