Fatal编程技术网
  • html/
  • Html 使用列时，在每个li上放置相同的阴影

Html 使用列时，在每个li上放置相同的阴影

html css

Html 使用列时，在每个li上放置相同的阴影,html,css,Html,Css,在我的网站上，我有一个部分，我使用的李的数量取决于有多少条目 假设有3个条目，将生成3个li。当有4个条目时，将生成4个li，依此类推。我所做的是给我的ul一个列值，该值根据条目的数量而变化 这一切都是完美的。然而，我现在想要的是在每一个李上画一个阴影。当我尝试这样做的时候，只有最后一个李是按应该的方式完成的。有人知道我怎样才能改变这一切吗 我的李属于类项。我尝试应用的css如下 .item{width:100%; max-width: 290px; box-shadow: 0px 2px 2p

在我的网站上，我有一个部分，我使用的李的数量取决于有多少条目

假设有3个条目，将生成3个li。当有4个条目时，将生成4个li，依此类推。我所做的是给我的ul一个
列
值，该值根据条目的数量而变化

这一切都是完美的。然而，我现在想要的是在每一个李上画一个阴影。当我尝试这样做的时候，只有最后一个李是按应该的方式完成的。有人知道我怎样才能改变这一切吗

我的李属于
类
项
。我尝试应用的
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);}
希望有人能告诉我如何解决我的问题

编辑

根据要求，这里有一个发生了什么的例子。

问题是列停在元素的底部，因此您无法看到底部阴影（位于该阴影下方）
在每个列表元素中添加一个
边距底部
，意味着该列将继续显示更多，因此您可以看到底部阴影

请参见

请共享html代码片段我想，由于
  • 项是块并垂直堆叠的，问题在于底部
  • 项覆盖了各自顶部
  • 项的底部阴影item@niyasc我加了一个例子