css - 防止边界底部“泄漏”到侧面边界？

Question

我有ul一个 1px 的左边框和一个 2px 的li子边框。问题是我想在每个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元素设置样式

现场演示可以在这里看到：http: //jsbin.com/welcome/36341

* { margin: 0; padding: 0; }

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

#mainNav ul{
   height: 35px;
  list-style: none;
}

#mainNav ul li{
    float: left;
    height: 35px;
    padding-bottom: 0;
    font-size: 17px;
    border-right:1px solid #444;
    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 );
}

#mainNav a {
  height: 33px;
  display: block;
  line-height: 33px;
  border-bottom: 2px solid #00a4ff;
  color: #fff;
  padding-left: 10px; padding-right: 10px;
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
}

Answer 2

由于我找不到防止边框泄漏的方法以及我不希望a成为整个li元素的大小这一事实，我不得不插入一个额外div的并将border-bottomandpadding-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标签的情况下执行此操作，请分享。