Question

我真的需要你的帮助。我已经在这几个小时无济于事。所以我正在接受大师和专家的互动。

为什么我的.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>

Answer 1

您的.tab_container具有填充属性。它将累加实际宽度的值，例如，您的宽度为200px，并且您已经为3px的所有边添加了填充，最终宽度将是实际宽度（200px）+填充（3px）= 203px

如果您想在所有div容器上添加填充而不更改所需的宽度，请在css中添加此代码。

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

请参阅jsfiddle中的working output

为什么我的标签容器框超出了我的主要div？

1 个答案: