자식 수를 기준으로 자식 크기 조정

Question

브라우저의 탭과 비슷한 UI를 만들고 싶습니다.

width: 20%; 
max-width: 150px; 

니스와 간단한, 반응 및 최고 :이를 위해

, 나는이 CSS와 요소를 가지고있다.

그러나 5 개의 탭만 지원합니다. 10 개의 탭을 지원하려면 width: 10%으로 변경하는 것만 큼 쉽습니다. 그런 일이 가능했던 경우

width: calc(100%/number-of-children) 

, 그 놀라운 것 :

그래서 기본적으로 내가 좋아하는 뭔가를 원한다.

현재 JavaScript를 사용하여 너비를 위의 식으로 설정하고 있습니다. 간단하고 기능적이지만, CSS 전용 솔루션을 아는 사람이 있는지 물어볼 것입니다.

Answer 1

display: flex. 예 :

마크 업

<section> 
    <div>tab 1</div> 
    <div>tab 2</div> 
    <div>tab 3</div> 
    <div>tab 4</div> 
</section> 

CSS는

section { 
    display: flex; 
} 

div { 
    flex-grow: 1; 
    max-width: 150px; 
} 

Codepen 예 : http://codepen.io/anon/pen/EGbpH/

Answer 2

display: table은 (는) 친구입니다. CSS3에서

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    display: table-cell; 
} 

Demo

Answer 3

는 CALC (라는 함수)있다 그래서 당신은

width: calc(100%/10); 

Here you can find 문서 등을 사용할 수있는 브라우저 지원이) 당신이 사용할 수 CSS3와