在我的个人网站上,我正在创建一个联系表。它在“业务查询”和“问题”之间切换。我已经设置了我的代码,以便 ID 为 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>
最佳答案
正如 Interrobang 已经提到的,您可以将 box-sizing
添加到您的代码中。但是您还需要为 #contact_tabs
设置 float
。
因此,更改您的 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;
}
关于css - div 以不存在的边距插入其他 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11920287/