Question

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

我该如何解决这个问题？

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

Answer 2

问题在于您指定了高度。这个CSS解决了这个问题：

input[type=radio]
{
   height:auto;
}

Answer 3

文本与单选按钮内联显示。单选按钮具有高度设置，按钮本身希望将其自身定位在该总高度的中心。文本自然位于行的底部。调整单选按钮的高度或将其作为块元素进行播放可以解决您的问题。

Answer 4

删除它，它会没事的：

input{
    height:30px;
}

Answer 5

正如其他答案所提到的（我更喜欢dgp＆＃39; s响应）..定义输入的30px高度会导致问题，因为标签和输入不是垂直对齐的。

其他一些事情......单击单选按钮文本应选择/取消选择输入。为此，请为您的输入设置一个ID（您可以使用与＆＃39; name＆＃39;相同的值），然后在收音机的文本周围添加标签标签。标签标签应该有一个＆＃39; for＆＃39;指向输入的属性，如同这个小提琴：

http://jsfiddle.net/z8SU9/

请注意您可以单击文本上的第一个单选按钮来设置收音机..然后单击第二个单选按钮文本不会（我没有修改第二个收音机，因此您可以查看其中的差异。）< / p>

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" id="test1"><label for="test1">Request Info</label><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>

为什么文本偏离我的单选按钮

5 个答案: