用CSS样式化表格

Question

I am trying to style a form on a website I am designing with CSS. I have tried to adjust the width of the labels and it doesn't change it. Here is my code: 

<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>

Here is my css: #contact label { width:200px !important; }

Yet this doesn't change the width of my labels. What am I doing wrong? Here is a link to the page: http://ridgesideredangus.com/about.php

Answer 1

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

Labels are inline elements by default. You cannot add dimensions unless you set them to block or inline-block.

Answer 2

As an alternate, ditch the divs altogether. Make your labels blocks and nest the form elements in them. Set the labels to position relative so you can position the form elements in relation to them.

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;}

Example

HOWEVER some argue it is preferable to explicitly relate the label to the input