我有一个无序列表,固定宽度为100px,嵌套li。每个li都填充有背景颜色。
嵌套li的数量可以是1到5.我想显示一个颜色调色板,其中每个li代表一种颜色。但是,li的宽度应该相等,具体取决于ul中嵌套的li的数量。例如,如果只有一个具有id =“1”的li,那么
#1{
width: 100%;
height:20px;
color: #222222;
}
如果有两个,其宽度应为ul的50%,依此类推。
我能够使用php和内联css来做到这一点,但我很好奇是否有一种方法可以在样式表中使用纯css。非常感谢任何帮助。
使用1 <li>
<ul>
<li id="1"></li>
</ul>
答案 0 :(得分:1)
我认为你所要求的基本上是
我有多达5个兄弟元素,必须填充其父级并保持相等的宽度
...在这种情况下,您需要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
提供了许多优秀指南。
答案 1 :(得分:0)
在这里提出了类似的问题: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%;
}
它似乎应该解决你的问题。