Question

我的ul左侧边框为1px，其li个孩子的底部边框为2px。问题是我希望在每个li元素的底部边框之间保留1px空间。以下是目前的情况：

example

我希望它看起来如何：

example

如您所见，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-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;
}

输出：

output

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

防止边界底部泄漏＆＃34;进入边界？

2 个答案: