タブコンテナボックスがメインdivを超えているのはなぜですか？

私は本当にこれであなたの助けが必要です。私はこれを何時間も無駄にしてきました。だから、私は専門家と専門家のインターウェブに就いています。タブコンテナボックスがメインdivを超えているのはなぜですか？

私の.tab_container divが私の右側のメインディビジョンを超えているのはなぜですか？この問題をどうやって解決しますか？ここで

は、問題の画像です：

ここでは、望ましい結果の画像です：ここで

は、問題のHTMLとCSSマークアップです：

<!DOCTYPE html> 
<html> 

<head> 

<style type="text/css"> 

ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; 
    border-bottom: 1px solid #999; 
    border-left: 1px solid rgb(109,109,109); 
    width: 100%; 
    display: flex; 
    position: relative; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 31px; 
    line-height: 31px; 
    border: 1px solid rgb(109,109,109); 
    border-left: none; 
    margin-bottom: -1px; 
    background: #e0e0e0; 
    overflow: hidden; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 8pt; 
    padding: 0 20px; 
    border: 1px solid #fff; 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { 
    background: #fff; 
    border-bottom: 1px solid #fff; 
    font-weight: bold; 
} 
.tab_container { 
    border: 1px solid green; 
    border-top: none; 
    clear: both; 
    float: left; 
    width: 100%; 
    background: #fff; 
    width: 100%; 
    height: 500px; 
    padding: 3px; 
} 
.tab_wrapper { 
    background: rgb(231,231,226); 
    height: 100%; 
} 
.tab_content { 
    padding: 10px; 
} 

</style> 
</head> 

<body> 
<div id="table-container"> 

    <div id="container"> 

     <div id="main" style="display: inline-block; border:1px solid red; width: 983px;"> 

      <ul class="tabs"> 
       <li><a href="#tab1">XAL-2017-482336</a></li> 
       <li><a href="#tab2">A-2017-00471</a></li> 
      </ul> 

      <div class="tab_container"> 

       <div class="tab_wrapper"></div> 

      </div> 


     </div><!-- END DIV main -->   

    </div><!-- END DIV container --> 

</div><!-- END DIV table-container --> 

</body> 

</html>

出典

2017-11-22 BobbyJones

でworking outputを参照してください。 –

あなた。 tab_containerにはパディングプロパティがあります。実際の幅の値が加算されます。たとえば、幅200px、すべての辺に3pxを加えた場合、最終幅は実際の幅（200px）+詰め物（3px）= 203pxになります。

希望の幅を変更せずにすべてのdivコンテナにパディングを追加する場合は、このコードをCSSに追加します。 3pxのタブコンテナに：

*, *:before, *:after{ 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
     box-sizing: border-box; 
}

はパディングを削除jsfiddle

出典

2017-11-22 03:57:58 justch4

は魅力的に働いた。どうもありがとうございます！ :) – BobbyJones

タブコンテナボックスがメインdivを超えているのはなぜですか？

答えて

関連する問題