如何在導航欄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中均勻地分隔這些鏈接？

回答

相關問題