我在弹出窗口的 body 标签中有标签:
.tabs {
width: 100%;
height: 36px;
font-size: 0;
}
.tabs .tab {
width: 40%;
height: 100%;
padding: 7.5px 0 2px;
display: inline-block;
text-align: center;
/* font-family: 'Oswald', sans-serif; */
font-weight: 700;
font-size: 12px;
cursor: pointer;
}
.defaultselectedtab {
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: black;
border-right-color: black;
border-left-color: black;
border-bottom-color: gray;
}
.defaultnonselectedtab {
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: gray;
border-right-color: gray;
border-left-color: gray;
border-bottom-color: black;
}
#emailtabspacing {
border-bottom-style: solid;
border-bottom-color: black;
padding: 0px 50px 27px 0px;
}<body>
<div class="tabs">
<div id="emailtab1" class="tab defaultselectedtab">My Personal Message</div>
<span id="emailtabspacing"></span>
<div id="emailtab2" class="tab defaultnonselectedtab">Anonymous Message</div>
</div>如何从 div 的左侧和右侧向外延伸边界线，使线条与 body 标签的左侧和右侧相接？
最佳答案
要将边框从左右延伸到页面边缘(我相信这是你想要的)，将border-bottom添加到.tabs，并确保 body 没有边距(请参阅下面的代码)。 Using a reset还有助于清除默认的浏览器 CSS，等等。
body {
margin:0;
}
.tabs {
width: 100%;
height:36px;
font-size: 0;
border-bottom:2px solid #000;
}
.tabs .tab {
width: 40%;
height: 100%;
padding: 7.5px 0 2px;
display: inline-block;
text-align: center;
/* font-family: 'Oswald', sans-serif; */
font-weight: 700;
font-size: 12px;
cursor: pointer;
}
.defaultselectedtab {
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: black;
border-right-color: black;
border-left-color: black;
border-bottom-color: gray;
}
.defaultnonselectedtab {
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-top-color: gray;
border-right-color: gray;
border-left-color: gray;
border-bottom-color: black;
}
#emailtabspacing {
border-bottom-style: solid;
border-bottom-color: black;
padding: 0px 50px 27px 0px;
}<body>
<div class="tabs">
<div id="emailtab1" class="tab defaultselectedtab">My Personal Message</div>
<span id="emailtabspacing"></span>
<div id="emailtab2" class="tab defaultnonselectedtab">Anonymous Message</div>
</div>关于html - 从 div 向外扩展边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34054708/