div推动其他div没有余地

Question

在我的个人网站上，我正在创建一个联系表格。它在“商务咨询”和“问题”之间切换。我已设置好代码，以便标识contact_tabs的标签与表单空间contact_form共享相同的div。但是，这两个div不适合它们的容器div（id为contact）。 contact_form被Chrome的开发者控制台标识为额外保证金，即使我已将保证金设置为margin:0;。

以下是我的相关CSS样式和HTML。

CSS：

/* Contact */
#contact {
    width:80%;
    border:3px outset #EFF;
    height:300px;
    margin:auto;
    margin-top:20px;
    margin-bottom:40px; 
}
#contact_tabs {
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}
#contact_tabs ul {
    margin-top:0;
    margin-bottom:0;
    padding-left:0;
    height:100%;    
}
#contact_tabs ul li {
    list-style-type:none;
    background-color:#111;
    height:50%;
}
#contact_tabs ul li a {
    font-size:20px;
    display:block;
    padding:63px 30px;
    color:inherit;
    text-decoration:none;
    transition:padding-left 0.5s;
    -webkit-transition:padding-left 0.5s;
    -moz-transition:padding-left 0.5s;
    -o-transition:padding-left 0.5s;
}
#contact_tabs ul li a:hover {
    padding-left:55px;  
}
#contact_tabs ul li.selected {
    background-color:rgba(255,255,255,0.8); 
}
#contact_tabs ul li.selected a {
    color:#111; 
}
#contact_form {
    width:70%;
    height:100%;
    float:right;
}

HTML：

<div id="contact">
    <div id="contact_tabs">
        <ul>
            <li class="selected" id="inquiry"><a href="#inquiry">Buisness inquiries</a></li>
            <li id="question"><a href="#question">Questions</a></li>
        </ul>
    </div>
    <div id="contact_form">
        <form id="inquryForm">
            <input type="text" placeholder="First Name" id="fname" />
        </form>
        <form id="questionForm">
            <input type="text" placeholder="First Name" id="fname2" />
        </form>
    </div>
</div>

Answer 1

#contact_tabs的宽度为30％，而#contact_form的宽度为70％。这是100％。但是，#contact_tabs也有一个2px的右边框。那是100％+ 2px，所以没有足够的空间。

您可以通过多种方式解决此问题。如果您不介意放弃IE7支持，可以使用box-sizing: border-box在宽度计算中包含边框。或者，您可以将百分比宽度更改为像素宽度，为2px右边框留出足够的空间。

Answer 2

正如Interrobang已经提到的那样，您可以在代码中添加box-sizing。但您还需要为float设置#contact_tabs。

因此，请更改您的CSS代码：

#contact_tabs
{
    width:30%;
    border-right:2px solid #FFF;
    height:100%;
    margin-right:0; 
}

为：

#contact_tabs
{
    width:30%;
    float:left;
    border-right:2px solid #fff;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

<强> DEMO