0

在我的个人网站上，我正在创建一个联系表格。它在“业务查询”和“问题”之间切换。我已经设置了我的代码，以便具有 id 的选项卡contact_tabs与表单空间共享相同的 div contact_form，. 但是，这两个 div 不适合它们的容器 div（id 为contact）。contact_form被 Chrome 的开发者控制台识别为额外边距的内容推低，即使我已将边距设置为margin:0;.

contact_tabs 有额外的边距

contact_form 被下推

这是我相关的 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>
4

2 回答 2

1

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

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

于 2012-08-12T06:58:27.503 回答
1

正如 Interrobang 已经提到的，您可以添加box-sizing到您的代码中。但是您还需要设置floatfor #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;
}

演示

于 2012-08-12T10:30:28.450 回答