css - 防止 border-bottom 从 "leaking"进入侧边界？

Question

我有一个 ul，它的 li 子元素左边框为 1px，底边框为 2px。问题是我想在每个 li 元素的底部边框之间保留 1px 的空间。这是它目前的样子:

我希望它看起来如何:

如您所见，一旦 border-left 结束，border-bottom 将继续并填充 1px 的间隙。有办法避免这种情况吗？

这是相关的 HTML:

        <div id="mainNav">
          <ul>
            <li>
                <a href="#" class="mainNavLink">Leaderboards</a>
            </li>
            <li>
                <a href="#" class="mainNavLink">Statistics</a>
            </li>
            <li id="mainNavSearch">Search</li>
        </ul>
      </div>

还有 CSS:

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 25px;
    padding: 10px;
    padding-top: 8px;
    padding-bottom: 0;
    font-size: 17px;
    border-left: 1px solid #444;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}

#mainNavSearch{
    border-right: 1px solid #444;
}

Answer 1

因为我找不到防止边界泄漏的方法，而且我不希望 a 是整个 li 的大小> 元素，我不得不插入一个额外的 div 并应用 border-bottom 和 padding-left/right 样式来代替:

HTML:

    <div id="mainNav">
        <ul>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Leaderboards</a>
                </div>
            </li>
            <li>
                <div>
                    <a href="#" class="mainNavLink">Statistics</a>
                </div>
            </li>
            <li id="mainNavSearch">Search</li> <!-- I did not include a div here as I plan on changing this to a search bar later -->
        </ul>
    </div>

CSS:

#mainNav{
    width: 100%;
    height: 35px;
    background-color: #202020;
    border-bottom: 1px solid #444;
    position: relative;
    overflow: hidden;
}

#mainNav ul{
    width: 960px;
    height: 35px;
    margin: 0 auto 0 auto;
    display: block;
    position: relative;
}

#mainNav ul li{
    float: left;
    position: relative;
    height: 27px;
    font-size: 17px;
    border-left: 1px solid #444;
    padding-top: 8px;
}
#mainNav div{
    display: block;
    position: relative;
    height: 25px;
    padding: 0 10px 0 10px;
    border-bottom: 2px solid #00a4ff;
    background: -moz-linear-gradient(top,  rgba(24,24,24,0) 60%, rgba(24,24,24,0.38) 90%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(24,24,24,0)), color-stop(90%,rgba(24,24,24,0.38)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom,  rgba(24,24,24,0) 60%,rgba(24,24,24,0.38) 90%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00181818', endColorstr='#80000000',GradientType=0 );
}
#mainNavSearch{
    border-right: 1px solid #444;
    padding: 0 10px 0 10px;
}

输出:

---

如果有人知道如何在没有额外的 div 并且没有将样式应用于 a 标签的情况下执行此操作，请分享。