0

CSS でデザインしている Web サイトのフォームのスタイルを設定しようとしています。ラベルの幅を調整しようとしましたが、変更されません。これが私のコードです: </p> 

<h3>Contact Form</h3>
<div>
    <label for="form1_name">Name</label>
    <input id="form1_name" name="name" type="text" required="required" />

</div>

<div>
    <label for="form1_email">Email</label>
    <input id="form1_email" name="email" type="email" placeholder="you@company.com" required="required" />


</div>

<div>
    <label for="form1_email">Telephone</label>
    <input id="form1_telephone" name="telephone" type="text" />
    </div>


<div>
    <label for="form1_message">Comment</label>
    <textarea id="form1_message" name="message" cols="30" rows="4" required="required"></textarea>

</div>

<div>
    <input id="form1_submit" name="submit" value="Send" type="submit" /><input type="hidden" name="cms-form" value="Y29udGFjdDpwZXJjaF9mb3JtczovdGVtcGxhdGVzL2NvbnRlbnQvY29udGFjdC5odG1s" />
</div>


</form></div>

これが私の CSS です: #contact label { width:200px !important; }

それでも、これは私のラベルの幅を変えません。私は何を間違っていますか？ページへのリンクは次のとおりです: http://ridgesideredangus.com/about.php

4

2 に答える 2

4 
#contact label {display: inline-block; width: 200px;}

デフォルトでは、ラベルはインライン要素です。ブロックまたはインライン ブロックに設定しない限り、ディメンションを追加することはできません。

于 2013-02-05T03:07:35.217 に答える
0

代わりに、divs完全に捨ててください。ラベル ブロックを作成し、フォーム要素を入れ子にします。ラベルを相対的な位置に設定して、フォーム要素を相対的に配置できるようにします。

HTML

<label >Name<input id="form1_name" name="name" type="text" required="required" /></label>

<label >Email<input id="form1_email" name="email" type="email" placeholder="you@company.com" required="required" /></label>

<label >Telephone<input id="form1_telephone" name="telephone" type="text" /></label>

CSS

label {display:block;position:relative;padding:5px;}
label input {position:absolute; left:100px;}

例

ただし 、明示的に を に関連付ける方が好ましいと主張する人もlabelいます。input

于 2013-02-05T03:29:22.380 に答える