Html 无法使1px与主边框对齐

我需要你的帮助

如何修改下面的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>

---

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

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

---

将ul标签中的高度更改为30px 因为你在ul中给出了30px

---

这两行（添加在底部）将其固定：

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

边框添加到

边框顶部，将其从底部移动到顶部即可。不使用
框大小：边框框
时，您必须确保所有边框的总和相同，以防止发生类似情况


.container{宽度：500px；边距：10px自动；}
ul标签{
保证金：0；
填充：0；
浮动：左；
列表样式：无；
边框底部：1px实心#999；
左边框：1px实心#999；
宽度：100%；
高度：31px；
}
李先生{
浮动：左；
保证金：0；
填充：0；
高度：30px；
线高：30px；
边框：1px实心#999；
左边界：无；
边缘底部：0px；
背景：#e0；
溢出：隐藏；
位置：相对位置；
}
ul.lia{
文字装饰：无；
颜色：#000；
显示：块；
字体大小：1.2米；
填充：0 20px；
大纲：无；
}
ul.a:悬停{
背景：#ccc；
}   
html ul.tabs li.active{
背景：#fff；
边框顶部：2个实心rgb（230139,44）；
边框底部：1px实心#FFF；
}
html ul.tabs li.active a:悬停{
背景：#fff；
}
.tab_容器{
边框：1px实心#999；
边界顶部：无；
明确：两者皆有；
浮动：左；
宽度：100%；
背景：#fff；
}
.tab_内容{
填充：20px；
字体大小：1.2米；
}
.tab_内容h2{
字体大小：正常；
垫底：10px；
字号：1.8em；
}
.tab_内容h3 a{
颜色：#254588；
}
ul.tabs{边框底部：无；}
html ul.tabs li.active{边框底部：无；}







表1内容
表2内容
表3内容
表4内容
在这里可以正常工作。您在哪个浏览器中查看此内容？…以及在什么缩放级别？当您设置高度时，如果添加boder，该高度将从顶部和/或底部增加X像素，如果您不使用框大小：border box；我认为它需要是29px，因为为活动状态添加了2px上边框。
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;

}

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