我在列表项上显示box-shadow时遇到问题。我在这里找到了一些相似的答案,但在我的案例中没有一个能帮助我。我尝试在列表项的右侧和底部有阴影,就像在此页面上的第一个示例http://css-tricks.com/snippets/css/css-box-shadow/一样。这是我的清单:
<ul id="BrosureLista">
<li>
<div class="BrosureListSlika">
<img src="/images/Brosure01.jpg">
<div class="BrosureListSlikaNaslov">
<div>
<h1>CL</h1>
<h2>2013</h2>
</div>
</div>
</div>
<div class="BrosureListNaslov">
<h2>CL 2013</h2>
<p>vodič za hedoniste</p>
</div>
<div class="BrosureListDownload">
<a href="#"><p>Download</p>
<img src="/images/Download.png"></a>
</div>
<div class="clear"></div>
</li>
</ul>
这里的安德是我的名单的css:
#BrosureLista{
position:relative;
width:100%;
text-align:left;
}
#BrosureLista li{
position:relative;
width:100%;
list-style:none;
display:block;
padding:50px 0;
overflow:visible;
-moz-box-shadow: 2px 3px 2px grey;
-webkit-box-shadow: 2px 3px 2px grey;
box-shadow: 2px 3px 2px grey;
}
感谢您的帮助!
答案 0 :(得分:1)
你给你的100%宽度。你的右眼影在屏幕外面。 尽量减少宽度 - 可能95-97%?