Question

我有一个无序列表，固定宽度为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>

Answer 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提供了许多优秀指南。

Answer 2

在这里提出了类似的问题：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%;
}

它似乎应该解决你的问题。

具有可变li宽度的UI

2 个答案: