标签和标签样式不适用于我的表单。

Question

我正在尝试使用标签设置表单样式，标签样式似乎无法正常工作。

以下是我的html表格的样子：

 <h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
 <h3>We welcome all compliments and constructive criticism!</h3>

    <form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
    <!--Required hidden operators--> 
    <input name="recipient" type="hidden" value="bfloran@salud.unm.edu" />
    <input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
    <input type="hidden" name="cc" value="mgwilson@salud.unm.edu" />

    <input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->

 <!-- Our form in HTML -->

 <label for "name">Your Name (optional):</label>


 <br />
 <input name="name" type="text" id="name" value="" /><br />
 Your E-mail (Optional):<br />
 <input name="mail" type="text" value="" />
 <br /> comment:<br /> <textarea name="comment" value="" ></textarea><br /> <br />     <input type="submit" value="Send" /> <br /> <input type="reset" value="Reset" /></div>

我对这部分的css看起来像这样：

 .allpages {text-align:center;color:#007a86;}
 h3{text-align:center;}
 .webform {background-color: #eeeeee; 
 width: 655px;  border: solid;
  border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px   17px;}
.webform .label {display:inline-block; width:200px; vertical-align:top; text-align:right;}

Answer 1

label不是类 ...它是标记。

为该片段使用CSS：

.webform label { } /* see .label changed to label */

另外：您的元素在HTML中没有正确布局，有些甚至不是标签。

---

固定小提琴： http://jsfiddle.net/digitalextremist/mt4jK/2/

---

<强>摘录：

.webform label {
    width:200px;
   vertical-align:top;
    text-align:right;
    float: left
}

<label for="name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" />

Answer 2

您创建了一个类选择器，以引用带有class = label

的某个标记