Question

当我放入一个边距时，它会向右边增加5px，因为我也期望它，但它会产生我的盒子阴影问题。我希望盒子阴影能够覆盖由边缘创建的空间（白色空间）。有没有解决这个问题？显然，如果你没有任何边距，那么盒子阴影看起来很棒。

这是我的CSS

    #horizontalNav{
        margin: 0;
        padding: 0;
    }

    #horizontalNav ul{
        margin: 0;
        padding: 0;
        box-shadow: 5px 5px 10px #888888;


    }

    #horizontalNav ul li{
        margin-right: 5px;  /* Make this margin a 0 to see what it looks like without margin added */
        padding: 0;
        list-style: none;
        position: relative;
        float: left;

        background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));

    }

    #horizontalNav ul li a{
        text-align: center;
        width: 150px;
        height: 30px;
        display: block;
        color: white;
        border: 1px solid black;
        text-decoration: none;
        text-shadow: 1px 1px 1px black;
    }

    #horizontalNav ul ul{
        position: absolute;
        visibility: hidden;
        top: 32px;
    }

    #horizontalNav ul li:hover ul{
        visibility: visible;
    }

    #horizontalNav ul li:hover{

        background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));  
    }

    #horizontalNav ul li:hover ul li a:hover{
        background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
    }

    #horizontalNav ul li a:hover{
        color: black;
    }

    #horizontalNav ul li ul li a:hover{
        color: #120801;
    }

这是我的HTML

<div id="wrapper">
       <div id="horizontalNav">
         <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                </ul>
            </li>
         </ul>
       </div> 
</div>

Answer 1

如果你不想在ul上使用盒子阴影，那么尝试将盒子阴影放在另一个元素上。实际链接似乎达到了您想要的效果，但随后抓住了顶级链接，因此您可能需要更具体地定位目标。

#horizontalNav ul ul a {
    box-shadow: 5px 5px 10px #888888;
}

实际上......这也不是添加它的最佳元素。这是一个精简的小提琴，有一个完整的答案。我还敦促你看看如何给出正确的元素类（第一个ul），它使事情更具可读性。

jsFiddle

Answer 2

为什么你要为5px添加保证金权利似乎毫无价值。对于空间，您应该添加padding-right到5px;

如何在添加边距的情况下制作盒子阴影？

2 个答案: