Css 如何在navbar div中均匀分布这些链接？_Css

Css 如何在navbar div中均匀分布这些链接？

css

Css 如何在navbar div中均匀分布这些链接？,css,Css,我想在包含“banLinks”分区内均匀地隔开“About”、“Hours”、“Contact”三个链接。我不想使用任何类型的列表我想每个环节是均匀间隔，占1/3的集装箱。我对HTML和CSS非常陌生，我不知道如何做到这一点我认为一种方法可能是将div容器的宽度（以像素为单位）除以3，考虑字体大小，然后以某种方式围绕这个数字设置边距。但对我来说，这似乎有点不合适，我不确定这是否已经完成 <body> <div id="wrapper"> <div clas

我想在包含“banLinks”分区内均匀地隔开“About”、“Hours”、“Contact”三个链接。我不想使用任何类型的列表

我想每个环节是均匀间隔，占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>

这是一个jsfiddle

将此添加到样式中：

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

代替通常的链接，将它们放入列表中，并将列表设置为内联。然后，您可以对列表项应用边距以将其隔开

HTML

使用展示台

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

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

这里是小提琴：

这里有两个选项……这两个选项都可以工作，不管列表项的数量如何……假设有足够的宽度

显示：表格单元格

.banLinks{ 边框：2件纯黑；宽度：553px；文本对齐：居中；保证金：0自动；显示：表格； } 班纳先生{ 显示：表格单元格；边框：1px纯灰 }

您可以使用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：

flexbox:

我想你错过了我希望每个链接均匀分布的部分，占据其容器的1/3…无论如何，我已经提供了flexbox解决方案。是的，这不是唯一的flexbox解决方案：，我向j-fiddle添加了你的反馈，他们现在都占容器的33%，请注意，这是一种黑客和丑陋的编码，几乎与我们的任何flexbox解决方案相同。

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

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

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

.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


}