變量li寬度的UI

我有一個固定寬度爲100px的嵌套li的無序列表。每個li都充滿背景色。變量li寬度的UI

嵌套li的數量可以從1到5.我想顯示一個顏色調色板，其中每個li代表一種顏色。但是，li的寬度應該相等，具體取決於ul中嵌套的li的數量。例如，如果僅存在一個具有ID =「1」裏，然後

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

如果有兩個在其寬度應該是UL的50％等。

我能夠使用php和內聯css來做到這一點，但我很好奇，如果有一種方法可以在樣式表中使用純css來做到這一點。任何幫助深表謝意。

樣品標記爲1 <li>

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

來源

2014-04-01 Kwaasi Djin

你如何在PHP中做到這一點？ – witherwind

在PHP中，我會事先知道存在多少嵌套li，並使用相應的寬度回顯內聯樣式。所以如果有5李，那麼每個李將有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寬度的UI

回答

相關問題