扩展边界向外DIV

我有选项卡，在身体标记在弹出：扩展边界向外DIV

.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的右侧是否使命令行左侧和右侧的身体标记？

来源

2015-12-02 David Tunnell

你的意思是你想要的下边框是在页面的底部？ –

我希望底部边框向外延伸到盒子的左侧和右侧，直到它到达白色区域的末端。 –

嗯，你的问题让我感到困惑，我说“让行碰到身体标记的末尾”，我将其解释为页面的底部/末尾。 –

从左侧和右侧边框延伸到页面（我相信这是你想要的）的边缘，加上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>

来源

2015-12-02 23:18:23

扩展边界向外DIV

回答

相关问题