1. 程式人生 > >CSS3 如何實現標籤寬度按權等分

CSS3 如何實現標籤寬度按權等分

類似於導航欄類的標籤通常會涉及到寬度等分的問題,一些比較好等分的類似四個五個六個這樣的按百分比為單位就可以的,但是遇到三等分七等分這種的用百分比就很難等分了,這裡介紹css3的一個flex的屬性,父級元素用display:flex;佈局,子集元素用flex:1;均分父級元素,這樣就可以達到完美的等分效果了,具體程式碼如下:
html程式碼:

<ul id="father">
<li class="children">第一個</li>
<li class="children">第二個</li>
<li class="children"
>
第三個</li> </ul>

css程式碼:

#father{
  display:flex;
  width:100%;
  height:10rem;
}
.children{
  flex:1;
  text-align:center;
}

這裡要注意的是flex是等分父級元素的寬度,要實現等分,首先得保證這些標籤元素在同一父級標籤元素下面,當然,flex後面的值不一定非要是1,若是要讓不同的子標籤佔不同的比重,填上相應的權值即可。