擴展邊界向外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

回答

相關問題