背景 (a) 和边框 (ul) 之间的白色间隙

Question

我构建了一个导航栏，当您将鼠标悬停或单击某个项目时，所选项目的背景颜色将发生变化。

最后我想把角落弄圆。然后我看到有一个白色的Space我无法删除。

HTML

    <nav id="nav">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#lorem">Lorem</a></li>
            <li><a href="#ipsum">Ipsum</a></li>
            <li><a href="#dolor">Dolor</a></li>
        </ul>
    </nav>

CSS

#nav
{
    position: absolute;
    top: 50px;
    width: 100%;
}
    #nav > ul
    {
        padding: 0;
        margin: auto;
        width: 50%;

        list-style: none;
        display: flex;

        border: 1px solid #673ab7;
        border-radius: 20px;
        background: #ffffff;
    }
        #nav ul > li 
        {
            margin: 0;
            width: 100%;
            color: #673ab7;

            line-height: 40px;
        }
            #nav ul > li > a
            {
                display: block;
                color: inherit;

                text-align: center;
                text-decoration: none;
                text-transform: uppercase;
                letter-spacing: 2px;

                transition: background 0.25s;

                position: relative;
            }
                #nav ul > li > a:hover
                {
                    background: #ede7f6;
                }
                #nav ul > li:first-child > a:hover
                {
                    border-radius:  20px 0px 0px 20px;
                }



            #nav ul > li.active > a
            {
                border-radius:  20px 0px 0px 20px;
                color: #FFFFFF;
                background: #673ab7;
            }

JS

$(document).ready(function()
{
  $("#nav > ul > li").click(function()
  {
    $("#nav > ul > li").each(function()
    {
        $(this).removeClass("active");
    });
    $(this).addClass("active");
  });
});

演示：http://jsfiddle.net/sdaq97hh/31/

Answer 1

请在ul标签中添加overflow隐藏样式

#nav > ul {
padding: 0;
margin: auto;
width: 80%;
list-style: none;
display: flex;
border: 1px solid #673ab7;
border-radius: 20px;
background: #ffffff;
overflow: hidden;
}

Answer 2

您可以定位最后一个 li，如下所示：

#nav ul > li:last-child a {
  border-radius: 0 20px 20px 0px;
}

JSFIDDLE

背景 (a) 和边框 (ul) 之间的白色间隙

White Gap between Background (a) and Border (ul)

html

css

border

removing-whitespace