gpt4 book ai didi

html - 使用列时每个里都有相同的阴影

转载 作者:行者123 更新时间:2023-11-28 16:08:19 27 4
gpt4 key购买 nike

在我的网站中,我有一部分使用了一定数量的 li,具体取决于条目的数量。

假设有 3 个条目,将生成 3 个 li。当有 4 个条目时,将生成 4 个 li,依此类推。我所做的是为我的 ul 提供一个 columns 值,该值会根据条目的数量而变化。

这一切都完美无缺。但是我现在想要的是在每一里画一个阴影。当我尝试这样做时,只有最后一个 li 会按应有的方式受到影响。有谁知道我该如何改变它?

我的 li 属于 class item。而我尝试应用到它的 css 如下

.item{width:100%; max-width: 290px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}

希望有人能告诉我如何解决我的问题

编辑

此处要求的是发生的情况的示例。 https://jsfiddle.net/x0u9xao0/

最佳答案

问题是列停在元素的底部,所以你看不到底部阴影(在它下面)
向每个列表元素添加 margin-bottom 意味着该列会继续延伸一些,因此您可以看到底部阴影

参见 fiddle

关于html - 使用列时每个里都有相同的阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38761585/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com