9

http://anonoz.com/armesh//contact_form/

上記のリンクは、私が作成しているお問い合わせフォームを示しています。右の写真のようにしようと思います。「Try us Today」というテキストmargin-topを 20px にする必要があります。

HTML:

<body>

<div id="form_container">
    <div id="form_body">
        **<span class="form_head">Try us Today</span>**
        <br/>
        <span class="form_subhead">30 day money back gurantee</span>
                <form id="enquiry_form" method="post" action="scripts/contact-form-handler.php"> 

                        <input type="text" name="name" id="name" value="Name" />

                        <input type="text" name="contact" id="contact" value="Contact Number" />

                        <input type="text" name="e-mail" id="email" value="Email" />

                       <input id='submit_button' type="submit" value="Get Your Space - NOW" />
                </form>
    </div>    
</div>

<img src="form2.jpg"/>
</body>

CSS:

.form_head {
    margin-top: 20px;
    color:#58585a;
    font-size:22px;   
}

CSS は.form_head20px を#form_bodydiv に対して押し下げる必要があります。しかし、何も起こりませんでした。Firebug と Chrome の開発者ツールを試してみましたが、なぜこれが起こっているのかわかりませんでした。また、フォームの高さに合わせて div の高さを設定しようとした#form_bodyので、 .form_head を押し下げる余地がありますが、まだ機能していません。

私はコーディングを始めて 3 か月になりますが、この種の問題によく直面します。私はいつも、ポジショニング コードをいくつか入力するだけでハックして抜け出します。

ただし、今日は同じことをしたくありませんが、なぜこれが起こっているのか、そしてそれを適切な方法で解決する方法を理解したいと思っています。誰かが光を当てて、これについて私に教えてくれませんか?

4

4 に答える 4

1

dispaly: ブロック プロパティを使用する必要があります。これがあなたのコードです：

.form_head {
    display:block;
    margin-top: 20px;
    color:#58585a;
    font-size:22px;  
}
于 2013-05-08T08:04:02.753 に答える
1

あなたは試すことができます

display:block;

padding-topの代わりにできることmargin-top、または検討したことはありますtopか?

于 2013-05-08T12:54:42.130 に答える