0

私の個人的なウェブサイトで、私は連絡フォームを作成しています。「お問い合わせ」と「質問」を切り替えます。contact_tabsIDを持つタブがフォームスペースと同じdivを共有するようにコードを設定しましたcontact_form。ただし、2つの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_tabs2px の右ボーダーもあります。これは 100% + 2px なので、十分なスペースがありません。

これはいくつかの方法で修正できます。IE7 のサポートをやめても構わない場合は、 を使用box-sizing: border-boxして幅の計算に境界線を含めることができます。または、パーセンテージ幅をピクセル幅に変更して、2 ピクセルの右境界線に十分なスペースを残すことができます。

于 2012-08-12T06:58:27.503 に答える
1

Interrobang が既に述べたように、コードに追加することができbox-sizingます。floatただし、 forも設定する必要があります#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 に答える