0

我正在尝试在我正在使用 CSS 设计的网站上设置表单样式。我试图调整标签的宽度并没有改变它。这是我的代码： </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 回答