Question

我在导航的底部显示了一个盒子阴影： http://jsfiddle.net/A6xYV/

nav {
    border-bottom: 1px solid #DDD;
    max-width: 960px;
    margin: auto;
    top: 40px;
    position: relative;
    background: #FFF;
}
nav:before, nav:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: #777;
    -webkit-box-shadow: 0 10px 10px #777;
    -moz-box-shadow: 0 10px 10px #777;
    box-shadow: 0 10px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
nav:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    display: block; // HERE IS THE PROBLEM - IT SHOULD BE INLINE!
    padding-top: 4px;
    padding-bottom: 4px;
    border-right: 1px solid #CDCDCC;
}

这很完美。但是我希望我的导航元素能够显示：内联; http://jsfiddle.net/gWafk/

为什么不起作用？

Answer 1

固定。问题基本上是根据相对高度设置top。如果您一次删除一个<li>，每次都会看到阴影会发生什么，您可以看到问题。我还将这些阴影生成div的背景透明化，因此它可以在许多不同的高度上工作。

更新宽度为320px：http://jsfiddle.net/iamnotsam/gWafk/8/

Answer 2

1-在nav:before, nav:after上将top: 80%;更改为top: 35%;

2-在nav ul li上如果您想要应用填充，请将display: inline;更改为display: inline-block;

演示 http://jsfiddle.net/gWafk/2/

CSS显示破坏阴影：之后和：之前

2 个答案: