我真的需要你的帮助。我已经在这里待了几个小时但无济于事。所以我正在访问大师和专家的互联网。
为什么我的 .tab_container div 超出了右侧的主 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>
最佳答案
您的 .tab_container 具有 padding 属性。它将加起来等于实际宽度的值，例如您的宽度为 200px，并且您在所有边上添加了 3px 的填充，最终宽度将是实际宽度(200px)+填充(3px)= 203px .
如果您想在所有 div 容器上添加填充而不更改所需的宽度，请在您的 css 中添加此代码。
*, *:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
参见 working output在 jsfiddle 中
关于html - 为什么我的选项卡容器框超出了我的主 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47426318/