가변 li 너비가있는

나는 중첩 된 li과 함께 고정 너비가 100px 인 정렬되지 않은 목록이 있습니다. 각 li은 배경색으로 채워집니다.가변 li 너비가있는

중첩 된 li의 수는 1에서 5까지입니다. 각 li이 색상을 나타내는 색상 팔레트를 표시하고 싶습니다. 그러나 li의 너비는 ul에있는 중첩 된 li의 개수에 따라 동일해야합니다. 두 가지가있는 경우 예를 들어, 폭 등등 50 %의 UL되어야 다음

#1{ 
    width: 100%; 
    height:20px; 
    color: #222222; 
}

ID = "1"로 리 하나만 존재하는 경우.

PHP와 인라인 CSS를 사용하여이 작업을 수행 할 수 있지만 스타일 시트에서이 작업을 수행하는 방법이 있는지 궁금합니다. 어떤 도움도 깊이 감사드립니다. 1 <li>

<ul> 
    <li id="1"></li> 
</ul>

출처

2014-04-01 Kwaasi Djin

당신은 PHP에서 어떻게합니까? – witherwind

PHP에서 나는 얼마나 많은 중첩 된 li이 존재하는지 알 것이며, 대응하는 너비의 인라인 스타일을 반향한다. 그래서 만약 5 리가 있다면 각각의 li는 20 %의 너비를 가지며, 4 %가 25 %라면 3 %는 33.3 %가됩니다. –

비슷한 질문이 여기에 있습니다 : Can CSS detect the number of children an element has? 그리고 해결책은 순수한 css3을 사용하여 가능합니다 - 가능하기 때문에 구형 브라우저를 수용해야합니다.

/* one item */ 
li: first-child:nth-last-child(1) { 
    width: 100%; 
} 

/* two items */ 
li:first-child:nth-last-child(2), 
li:first-child:nth-last-child(2) ~ li { 
    width: 50%; 
} 

/* three items */ 
li:first-child:nth-last-child(3), 
li:first-child:nth-last-child(3) ~ li { 
    width: 33.3333%; 
} 

/* four items */ 
li:first-child:nth-last-child(4), 
li:first-child:nth-last-child(4) ~ li { 
    width: 25%; 
} 

/* five items */ 
li:first-child:nth-last-child(5), 
li:first-child:nth-last-child(5) ~ li { 
    width: 20%; 
}

문제가 해결 될 것으로 보입니다.

출처

2014-04-01 03:55:07 JRulle

와

샘플 마크 업 나는 무엇을 요구하는지하는 것은 기본적으로 나는 동일한 폭을 부모를 작성하고 유지해야 최대 5 개 형제 요소가

생각

& hellip; 이 경우 display:flexbox을 원합니다. 나는 (이 필요하지 않지만, 당신의 질문에서 정렬되지 않은리스트 구문을 유지)

ul { 
    display:flex; /* lay out children using "flexible box" rules */ 
} 
li { 
    flex-grow:1; /* all children will expand equally to fill their parent */ 
    list-style-type:none; /* don't show the normal "bullet" next to each entry */ 
}

flexbox 새로운 틱 당신에게 예를 제공합니다, 그래서 당신은 오래된 브라우저를 다루는 경우 일부 compatibility concerns이있는 것입니다.

자세한 내용은 css-tricks.com에 flexbox에 대한 유용한 가이드가 많습니다.

출처

2014-04-01 03:14:33 Jeremy

가변 li 너비가있는

답변

관련 문제