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

我想在包含的'banLinks'div中均匀地分隔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/

来源

2016-03-04 MJH

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

来源

2016-03-04 17:02:02 jasper

我想你错过了部分*“我希望每个链接均匀分布，**占用其容器的1/3”* ......无论如何，我已经提供了一个flexbox解决方案。 –

是的，它不是唯一的flexbox解决方案:)，我将你的反馈信息添加到j-fiddle中，他们现在全部占其容器的33％，请注意这是一种破解和丑陋的编码，与我们的任何flexbox几乎相同解决方案。 https://jsfiddle.net/yuy84gmq/12/ – jasper

一下添加到风格：

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

来源

2016-03-04 16:26:38

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

来源

2016-03-04 16:27:47 Lee

请解释downvote？ – Lee

使用的显示表

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

来源

2016-03-04 16:30:59 Daniel

一对夫妇的选择这里...都的小时工作，不管列表项的数量...假设有足够的宽度。

显示：表小区

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

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

Flexbox的

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

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

来源

2016-03-04 16:33:59

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

回答

相关问题