具有可变li宽度的UI

时间:2014-04-01 02:52:20

标签: css

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

2 个答案:

答案 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.comflexbox提供了许多优秀指南。

答案 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%;
}

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