如何在div上均勻分佈一組跨度？

Question

我在我的網頁側面有一個aside，其中包含span塊，其中包含博客帖子的標籤。現在，他們被設置爲display: inline-table，每行放上多個，然後作爲溢出進入下一行。

如果可能的話（和JavaScript是好的，但CSS是首選），我怎麼可以得到這些跨度佔用div內的整個寬度，所以我沒有在右邊的「粗糙邊緣」？我想要增加span塊之間的利潤率，或者我也可以增加span的寬度。

下面的代碼我目前有：

body { 
 
    background-color: #333; 
 
    color: #333332; 
 
} 
 
aside { 
 
    background-color: white; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
} 
 
h2 { 
 
    margin: 24px; 
 
    padding-top: 24px; 
 
} 
 
.tag-wrapper { 
 
    padding: 0px 24px; 
 
} 
 
span { 
 
    display: inline-table; 
 
    text-transform: uppercase; 
 
    background-color: #F77C2F; 
 
    margin: 4px 2px; 
 
    padding: 8px; 
 
}

<div class="container"> 
 
    <aside> 
 
    <h2>Tags</h2> 
 
    <div class="tag-wrapper"> 
 
     <span>finance</span> 
 
     <span>if</span> 
 
     <span>pv</span> 
 
     <span>pivot tables</span> 
 
     <span>vba</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
    </div> 
 
    </aside> 
 
</div>

Answer 1

小Flexbox的魔力就會完成這項工作：

body { 
 
    background-color: #333; 
 
    color: #333332; 
 
} 
 
aside { 
 
    background-color: white; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
} 
 
h2 { 
 
    margin: 24px; 
 
    padding-top: 24px; 
 
} 
 
.tag-wrapper { 
 
    padding: 0px 24px; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-content: stretch; 
 
} 
 
span { 
 
    flex: 1 0 auto; 
 
    text-transform: uppercase; 
 
    background-color: #F77C2F; 
 
    margin: 4px 2px; 
 
    padding: 8px; 
 
}

<div class="container"> 
 
    <aside> 
 
    <h2>Tags</h2> 
 
    <div class="tag-wrapper"> 
 
     <span>finance</span> 
 
     <span>if</span> 
 
     <span>pv</span> 
 
     <span>pivot tables</span> 
 
     <span>vba</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
    </div> 
 
    </aside> 
 
</div>

使用的屬性是：

1. display: flex：這將容器的顯示類型設置爲flex（又稱flexbox）
2. flex-flow: row wrap：使項目在一行中排序，並根據需要進行換行。
3. align-content: stretch：使項目伸展以填充彎曲方向（行）。
4. flex 1 0 auto：使項目「growable」（1），但不是「shrinkable」（0），並使用自我基礎寬度（自動），然後分發剩餘空間。

Answer 2

這是你說的是什麼？如果是這樣，只需將span的顯示更改爲block而不是inline-block。

body { 
 
    background-color: #333; 
 
    color: #333332; 
 
} 
 
aside { 
 
    background-color: white; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
} 
 
h2 { 
 
    margin: 24px; 
 
    padding-top: 24px; 
 
} 
 
.tag-wrapper { 
 
    padding: 0px 24px; 
 
} 
 
span { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    background-color: #F77C2F; 
 
    margin: 4px 2px; 
 
    padding: 8px; 
 
}

<div class="container"> 
 
    <aside> 
 
    <h2>Tags</h2> 
 
    <div class="tag-wrapper"> 
 
     <span>finance</span> 
 
     <span>if</span> 
 
     <span>pv</span> 
 
     <span>pivot tables</span> 
 
     <span>vba</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
     <span>test</span> 
 
    </div> 
 
    </aside> 
 
</div>