无法获得1px与主边界对齐

Question

我需要你的帮助，

如何修改下面的css标记，以便添加额外的1个像素，活动点击标签消失并从我的UL LI标签菜单中移除，如下所示？

以下是问题的图片：

HTML标记：

<div class="container">

    <ul class="tabs">
        <li><a href="#tab1">Gallery</a></li>
        <li><a href="#tab2">Submit</a></li>
        <li><a href="#tab3">Resources</a></li>
        <li><a href="#tab4">Contact</a></li>

    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">Tab 1 Content</div>
        <div id="tab2" class="tab_content">Tab 2 Content</div>
        <div id="tab3" class="tab_content">Tab 3 Content</div>
        <div id="tab4" class="tab_content">Tab 4 Content</div>
    </div>
</div>

CSS：

.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    height: 31px;

}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: 0px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;

}

ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}   
html ul.tabs li.active {
    background: #fff;
    border-top: 2px solid rgb(230,139,44);
    border-bottom: 1px solid #FFF;
}
html ul.tabs li.active a:hover  {
    background: #fff;

}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}

Answer 1

您可以将内容向上移动一个像素：

html ul.tabs li.active a {
    position:relative;
    top:-1px;
}

https://jsfiddle.net/7adfsmdj/

Answer 2

在 ul.tabs 中将高度更改为30px 因为你在 ul.tabs li

中给出了30px

---

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    height: **30px;**

}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: **30px;**
    line-height: 30px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: 0px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;

}

Answer 3

这两行（在底部添加）修复了它：

ul.tabs { 
    border-bottom: none;
}
/* Why are you using `html` here? No point to it! */
html ul.tabs li.active {
    border-bottom: none;
}

您不需要在标签下方有一个完整的边框来绘制线条，让li元素处理它，然后只需将1px边框从底部移到顶部将其添加到border-top。不使用box-sizing: border-box时，您必须确保所有边框的总和相同，以防止发生此类事件。

＆＃13;

＆＃13;

.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    height: 31px;

}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: 0px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;

}

ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}   
html ul.tabs li.active {
    background: #fff;
    border-top: 2px solid rgb(230,139,44);
    border-bottom: 1px solid #FFF;
}
html ul.tabs li.active a:hover  {
    background: #fff;

}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}

ul.tabs { border-bottom: none; }
html ul.tabs li.active { border-bottom: none; }

＆＃13;

<div class="container">

    <ul class="tabs">
        <li class="active"><a href="#tab1">Gallery</a></li>
        <li><a href="#tab2">Submit</a></li>
        <li><a href="#tab3">Resources</a></li>
        <li><a href="#tab4">Contact</a></li>

    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">Tab 1 Content</div>
        <div id="tab2" class="tab_content">Tab 2 Content</div>
        <div id="tab3" class="tab_content">Tab 3 Content</div>
        <div id="tab4" class="tab_content">Tab 4 Content</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;