列表项目上的框阴影

时间:2013-11-16 13:37:21

标签: html css

我在列表项上显示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;
}

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

你给你的100%宽度。你的右眼影在屏幕外面。 尽量减少宽度 - 可能95-97%?