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样式列表元素随字体大小取决于元素

回答

相关问题