將鏈接調整爲等距

Question

我有一個帶有4個不同選項卡的頂部選項卡欄。我的問題是，由於選項卡標題長度不一樣，因此它們看起來像是填充已關閉，其中最小的標題有很多間距，而其他所有內容都非常狹窄（例如：https://codepen.io/bigzee/pen/XKLKxG） 。你可以看到我的意思，當你使屏幕瀏覽器很小（iPhone 5s的屏幕尺寸）

爲了解決這個問題，我添加了左/右間距（例如：https://codepen.io/bigzee/pen/OXZXom）。但是，現在，當您將瀏覽器縮小（iPhone 5s的屏幕尺寸）時，標題會重疊。我試圖用z-index來解決這個問題，但是這並沒有奏效。這裏是我的代碼用的z-index：

<div class="tabs-striped tabs-top tabs-background-royal" > 
    <div class="tabs" style="position: relative;"> 
     <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 1;"> 
      <p class="" style="position: relative; left: 5%;">Top</p> 
     </a> 
     <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 2;"> 
      <p class="" style="position: relative; right: 15%;">Top tab 2</p> 
     </a> 
     <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 3;"> 
      <p class="" style="position: relative; right: 15%;">Top tab 3</p> 
     </a> 
     <a class="bar-royal tab-item" style="color:white; position: relative; z-index: 4;"> 
      <p class="" style="position: relative; right: 15%;">Top tab tab 4</p> 
     </a> 
    </div> 
</div> 

我試着用行/列，以及（https://codepen.io/bigzee/pen/PzAzvK），但它仍然看起來並不正確。行/列的代碼如下：

<div class="tabs-striped tabs-top tabs-background-royal" > 
    <div class="tabs row" style=""> 
     <a class="bar-royal tab-item col col-10" style="color:white; min-width: 40px; margin-left: 2%;"> 
      <p class="" style="">Top</p> 
     </a> 
     <a class="bar-royal tab-item col col-30" style="color:white;"> 
      <p class="" style="">Top tab 2</p> 
     </a> 
     <a class="bar-royal tab-item col col-30" style="color:white;"> 
      <p class="" style="">Top tab 3</p> 
     </a> 
     <a class="bar-royal tab-item col col-30" style="color:white;"> 
      <p class="" style="">Top tab tab 4</p> 
     </a> 
    </div> 
</div> 

有關如何解決此問題的任何建議？

解決方法：

http://codepen.io/bigzee/pen/XKLymE

接受的答案對如何解決這一問題的解決方案。我只是在媒體查詢中添加了一個最大字體大小，以便在較小的屏幕上字體變小。

---

Answer 1

使用display: inline-block

.container { 
 
    width: 320px; 
 
    background-color: rgba(0, 0, 0, .1); 
 
    height: 100vh; 
 
    overflow: hidden; 
 
    margin: 0 auto; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.top-menu { 
 
    text-align: center; 
 
} 
 
ul { 
 
    display: inline-flex; 
 
    } 
 
li { 
 
    display: inline-block; 
 
} 
 
li { 
 
    list-style: none; 
 
    border: 1px solid; 
 
    padding: 1em; 
 
}

<div class="container"> 
 
    <div class="top-menu"> 
 
    <ul> 
 
     <li>top</li> 
 
     <li>top tab 2</li> 
 
     <li>top tab 3</li> 
 
     <li>top tab tab 4</li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

如果你想的間距要一致，然後離開<a>標籤上width: auto，將左，右頁邊距他們，並設置text-align: center在他們的容器上是一個很好的選擇。

HTML

<div class="tabs"> 
    <a>Top</a> 
    <a>Top tab 2</a> 
    <a>Top tab 3</a> 
    <a>Top tab tab 4</a> 
</div> 

CSS

div.tabs { 
    text-align: center; 
} 

a { 
    margin: 0 5%; 
} 

這裏有一個的jsfiddle有一組一致的間距中心環節。

https://jsfiddle.net/reid_horton/53xfjyob/

基於百分比的利潤幫助使這個例子有點反應更靈敏，但如果這還不夠，你還可以添加一些媒體的質疑。

注意：不幸的是，你不能同時具有一致的寬度和一致的空間。如果每個鏈接的寬度相同，則較窄的鏈接將在它們周圍留出更多空間。如果每個鏈接的周圍都有相同的空間，那麼它們不能都是相同的寬度。