div推动其他divs不存在保证金

Question

在我的个人网站上，我创建了一个联系表单。它在“Buisness Inquiries”和“Questions”之间切换。我已经设置了我的代码，以使标签，其ID为contact_tabs与表格空间contact_form共享相同的div。但是，这两个div不适合他们的容器div（编号为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

由于Interrobang已经提到，您可以将box-sizing添加到您的代码中。但是，您还需要为#contact_tabs设置float。

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

到：

所以，你的CSS代码改变

#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

Answer 2

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

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