如何在活动的Li选项卡上删除边框

Question

我有一个列表ul和项目li。在列表下面有一个带边框的框。框的顶部边框也是列表项的底部边框。

我想知道的是删除活动选项卡的底部边框。这意味着沿活动选项卡删除内容框的顶部边框。这有可能还是我需要使用其他方法？

li {
  display: inline-block;
  padding-top: 0;
  padding: 15px;
  border-right: 1px solid #e6e6e6;
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  font-family: 'Cera';
  font-size: 13px;
}

ul {
  list-style-type: none;
  margin: 0 auto;
  border-left: 1px solid #e6e6e6;
  padding-left: 0px;
}

.content-box {
  display: block;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  padding-bottom: 10px;
}

.active {
  position: relative;
  background-color: #f8f8f8;
  top: -3px;
}

<ul id="menu">
  <li class="active" data-nav="1">Prerender</li>
  <li data-nav="2">Prefetch</li>
  <li data-nav="3">Preconnect</li>
  <li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
  <h3 id="isPrerender"> Prerendered page:</h3>
  <ul class="results" id='pagetitle1'></ul>
</div>

这就是我想要的样子：

Answer 1

我建议您使用负边距重叠元素。

使用.htaccess将下部框的顶部边框与顶部框的底部边缘重叠。这样，活动的顶部框的margin-top:-1px可以覆盖下部框的顶部边框。

在所有顶部框上使用background-color（第一个框除外）以重叠其左侧和右侧的边框。否则，仅在一侧有边框，活动框将丢失在其上方的边框。

我在margin-left:-1px个元素之间插入了removed the white space，因为由于它们是<li>，所以该空间被渲染为框之间的间隙。

我正在使用其他display:inline-block来提高活动的顶部框，而不是使用否定的padding。这样可以使活动框内的文本与其他框保持相同的高度。

我将顶部的框与top对齐，以使其与底部的框齐平。

vertical-align:bottom

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  padding: 15px;
  margin-left: -1px;
  border-style: solid;
  border-color: #e6e6e6;
  border-width: 1px 1px 0 1px;
  cursor: pointer;
  font-family: 'Cera';
  font-size: 13px;
  vertical-align: bottom;
}

li:first-child {
  margin-left: 0;
}

.content-box {
  min-height: 100px;
  border: 1px solid #e6e6e6;
  margin-top: -1px;
  padding: 10px;
}

.active {
  background-color: #f8f8f8;
  padding-top: 18px; /* 15 + 3 */
}

Answer 2

如果您的想法是向下滑动选项卡以隐藏边框，则应重置li上的vetical-align（并最终注意空白），然后增加1px（对于1 px边框）的填充，然后像您尝试的那样将其降低到多余的像素。

li {
  display: inline-block;
  padding-top: 0;
  padding: 15px;
  border-right: 1px solid #e6e6e6;
  cursor: pointer;
  border-top: 1px solid #e6e6e6;
  font-family: 'Cera';
  font-size: 13px;
  vertical-align: bottom;
}

ul {
  list-style-type: none;
  margin: 0 auto;
  border-left: 1px solid #e6e6e6;
  padding-left: 0px;
}

.content-box {
  display: block;
  min-height: 100px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  overflow: hidden;
  padding-bottom: 10px;
}

.active {
  position: relative;
  background-color: #f8f8f8;
  padding-bottom: 16px;/* increase height of 1 px here, can be any value you want */
  top: 1px;/* low it done at least the border's thickness to hide */
}

body {
  margin: 1em;
}

<ul id="menu">
  <li class="active" data-nav="1">Prerender</li><!-- kill that white space via comments 
  --><li data-nav="2">Prefetch</li><!--
  --><li data-nav="3">Preconnect</li><!--
  --><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
  <h3 id="isPrerender"> Prerendered page:</h3>
  <ul class="results" id='pagetitle1'></ul>
</div>