javascript - 为什么我的单选按钮的文本偏离中心

Question

我正在创建一个带有单选按钮的表单。单选按钮旁边的文本与按钮处于不同的级别。

我该如何解决这个问题？

Website

Screenshot of issue

HTML

<div class="d5-d8 m-all"id="contactFormContainer" >
                <form name="mainForm" id="mainForm">
                    <p>Getting started or requesting more info?</p>
                    <!--<select name="dropdown">
                        <option value="purchase">Purchase Service</option>
                        <option value="inquire">Get Information</option>
                    </select>-->
                    <input type="radio"  value="Info" name="infoOrPurchase"> Request Info<br>
                    <input type="radio"  value="Purchase" name="infoOrPurchase"> Request Service<br>
                    <br /><br />
                    <label><input type="text" value="First Name" onfocus="if (this.value=='First Name') this.value='';" onblur="this.value = this.value==''?'First Name':this.value;" size="35" /></label>
                    <label><input type="text" value="Last Name" onfocus="if (this.value=='Last Name') this.value='';" onblur="this.value = this.value==''?'Last Name':this.value;" size="35" /></label>
                    <label><input type="text" value="Email" size="35" onfocus="if (this.value=='Email') this.value='';" onblur="this.value = this.value==''?'Email':this.value;" /></label>
                    <label><input type="text" value="Phone" size="35" onfocus="if (this.value=='Phone') this.value='';" onblur="this.value = this.value==''?'Phone':this.value;" /></label>
                    <label><input type="text" value="Company" size="35" onfocus="if (this.value=='Company') this.value='';" onblur="this.value = this.value==''?'Company':this.value;" /></label>
                    <label><input type="text" value="How did you hear about us?" size="35" onfocus="if (this.value == 'How did you hear about us?') this.value = '';" onblur="    this.value = this.value == '' ? 'How did you hear about us?' : this.value;" /></label>
                    <label><input id="commentsLabel" type="text" value="Comments" size="76" onfocus="if (this.value == 'Comments') this.value = '';" onblur="    this.value = this.value == '' ? 'Comments' : this.value;" /></label>
                </form>
            </div>

CSS

#mainForm{
    width:500px;
    float:left;
}

input{
    height:30px;
}
label{
    margin-top:30px;
}

    #commentsLabel{
        height:80px;
    }


input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(238, 116, 33, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(238, 116, 33, 1);
}

Answer 1

这可能会让您更接近您想要的。将以下内容添加到您的 CSS。如果愿意，您还可以尝试使用 margin-top 的值。

input[type=radio] {
  vertical-align: middle;
  margin-top: 0;
}