HTML樣式列表元素隨字體大小取決於元素

上我想在列表中有越來越多的減少每個元素的字體大小：HTML樣式列表元素隨字體大小取決於元素

<ul> 
<li>Number 1</li> 
<li>Number 2</li> 
<li>Number 3</li> 
</ul>

應該導致類似

數1
數2
數3

其中第一元件具有25像素的字體大小，第二個有20像素，第三有15個像素等。

有沒有辦法用CSS來做到這一點？

來源

2016-09-06 4ndro1d

是列出了無限長？是否有一點你停止減小字體大小？ – Serlite

'li {}，li + li {}，li + li + li {}'或'n-child'幾次。 – CBroe

好吧，基本上我不會有超過4個元素，但是很想看到一個尊重無限列表的解決方案 – 4ndro1d

你可以實現通過下面的CSS添加到您的樣式表這樣的效果：

li:nth-child(1) { 
    font-size: 25px; 
} 

li:nth-child(2) { 
    font-size: 20px; 
} 

li:nth-child(3) { 
    font-size: 15px; 
} 

li:nth-child(4) { 
    font-size: 10px; 
} 

li:nth-child(4) { 
    font-size: 5px; 
}

據我所知，有純CSS這樣做的沒有自動化的方式。你需要使用JavaScript（或像jQuery這樣的JavaScript庫）。

但是，正如上面的代碼示例所示，第五個LI元素的值爲零（它將呈現爲不可見），並且之後的任何值都將具有負值（這將是無效的）。

來源

2016-09-06 16:49:56

第四項是5px字體大小，第五項大小爲25px，這不太好。 – skobaljic

同意，第一個'li'規則可能應該是5px（或者最小的那個），因此所有後續項目都會獲得最小的字體大小。 – skyline3000

是的，但超過5個列表元素將導致值爲零或更低（這可以說是更糟 - 至少從可訪問性/可用性的角度來看）。這實際上是我在回答中要指出的。 –

-1

下面是使用JQuery示例，請參見例如https://jsfiddle.net/kvb5hb6f/3/

這是在25設置li字體大小起點和罪證-5然後在點擊數5它不走任何較小。

<ul id="numbers"> 
    <li>Number 1</li> 
    <li>Number 2</li> 
    <li>Number 3</li> 
    <li>Number 4</li> 
    <li>Number 5</li> 
    <li>Number 6</li> 
    <li>Number 7</li> 
    <li>Number 8</li> 
    <li>Number 9</li> 
</ul> 
<script> 
    var listItems = $("#numbers li"); 
    var fontHeight = 25; 
    listItems.each(function(idx, li) { 
    var product = $(li); 
    if (fontHeight >= 5) { 
     $(product).css("fontSize", fontHeight + "px"); 
     fontHeight = fontHeight - 5; 
    } else { 
     fontHeight = 5; 
     $(product).css("fontSize", fontHeight + "px"); 
    } 
    }); 

</script>

來源

2016-09-06 16:45:14

「有沒有辦法只用CSS來做到這一點？」這裏是如何使用jquery完成它，因爲它很棒，可以完成所有的事情。 – PeeHaa

@PeeHaa來自OP的評論「基本上我不會有超過4個元素，但是很想看到一個尊重無限列表的解決方案」保持所有良好的downvoting :) –

他做到了。在他的問題。 – PeeHaa

這個解決方案不需要Javascript，你可以純粹在CSS中完成。

CSS

li { 
    font-size: 100%; 
} 

li:nth-child(1) { 
    font-size: 90%; 
} 

li:nth-child(2) { 
    font-size: 80%; 
} 

li:nth-child(3) { 
    font-size: 70%; 
} 

li:nth-child(4) { 
    font-size: 60%; 
}

雖然這並不去無限深，你提到的最多是4，所以這應該是一個很好的解決方案。

如果你需要無限深入，我建議一個JS解決方案，儘管需要的時間很少。

來源

2016-09-06 16:50:27

第四項將有100％的字體大小，這是不好的。 – skobaljic

代碼只是一個例子，您可以根據需要添加儘可能多的'：nth-child'元素。儘管如此，我更新了我的答案。 –

不好，首先設置所有列表元素的最小字體大小（例如：'li {font-size：50％;}'），而不是前4個。 – skobaljic

類可用於更改大小，向每個li元素添加一個類，並且可以創建CSS以相應地更改大小。

<ul> 
<li class="one">Number 1</li> 
<li class="two">Number 2</li> 
<li class="three">Number 3</li> 
</ul>

這是一個開始：https://jsfiddle.net/he5gs4z0/2/

來源

2016-09-06 16:54:55 JDavila

您可以使用從CSS中的第n個孩子：

`<ul class='ultag'> 
<li>Number 1</li> 
<li>Number 2</li> 
<li>Number 3</li> 
</ul> 
<style> 
.ultag li:nth-child(1) { font-size: 25px; } 
.ultag li:nth-child(2) { font-size: 20px; } 
.ultag li:nth-child(3) { font-size: 15px; } 
.ultag li:nth-child(4) { font-size: 10px; } 
</style> 
`

來源

2016-09-06 17:11:32 goliath309

HTML樣式列表元素隨字體大小取決於元素

回答

相關問題