我如何在我的navbar div中均匀地分布这些链接？ [英] How do I evenly space these links within my navbar div?
问题描述
我想在包含'banLinks'div的内容中平均分配3个链接（'About'，'Hours'，'Contact'）。我不想使用任何类型的列表。
I would like to evenly space the 3 links ('About', 'Hours', 'Contact') within the containing 'banLinks' div. I do not want to use a list of any kind.
我想让每个链接均匀分布，占用他们的容器的1/3。我非常新的HTML和CSS，我不知道如何做到这一点。
I would like each link to be evenly spaced, taking up 1/3 of their container. I am very new to HTML and CSS and I'm not sure how to do this.
我认为一种方法是将div容器的宽度除以3，计算字体大小，然后以某种方式设置边距数字。但对我来说，这似乎有点不切实际，我不知道这是否是做的事情。
I think one way of doing it may be by dividing the width of the div container in pixels by 3, account for the font size, then set the margins somehow around this figure. But to me this seems a bit unseemly, I'n not sure if this is the done thing.
<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/
Here is a jsfiddle. https://jsfiddle.net/yuy84gmq/6/
推荐答案
你可以使用flexbox做到这一点。执行以下操作：
you can do this using flexbox. Do as followed:
.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 /
JSfiddle: https://jsfiddle.net/yuy84gmq/10/ flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这篇关于我如何在我的navbar div中均匀地分布这些链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
