HTML元素对齐问题和标签和输入

Question

民间： 我想的HTML演习，以建立在一个交友网站， https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment

1）标签“电子邮件”，“移动”和“地址” “您的联系信息”与其对应的输入元素不在同一行。造成这种情况的代码中可能存在什么问题？

2）在“与您联系的方法：电子邮件WhatsApp应用内聊天”中，“应用内聊天”放在第二行。

下面

是代码：

fieldset { 
 
       background:lightyellow; 
 
       border:10px solid yellow; 
 
       margin-bottom:10px; 
 
       width:720px; 
 
      } 
 
    label { 
 
      width:180px; 
 
      display:inline-block; 
 
      text-align:right; 
 
      vertical-align:top; 
 
     } 
 
    .widthclass{ width:auto; } 
 

 
    .rangeLow, .rangeHigh{ 
 
      text-align:center; 
 
      width:40px; 
 
      display:inline-block; 
 
      vertical-align:top; 
 
      color:white; 
 
     } 
 

 
     .rangeLow{ background-color:red;} 
 
     .rangeHigh{background-color:blue;} 
 

 
    .textareaFormat{width:360px; height:50px;} 
 

 
    label:hover{font-size:20px} 
 
    input: hover{font-size:20px}

<FORM action="http://ihome.ust.hk/~rossiter/cgi- 
 

 
bin/show_everything.php " method="post" 
 

 
enctype="multipart/form-data" > 
 

 
<h1> 
 
Please Enter Your Details For Our Dating Websites! 
 
</h1> 
 

 
<fieldset> 
 
<legend> Your face </legend> 
 
<label for="yourimage"> Your image </label> 
 
<input type="file" id="yourimage" name="avatar" 
 

 
required> 
 
<br> 
 
<label for="imagePreview" > Image preview:</label><img 
 

 
src="" id="preview"> 
 
</fieldset> 
 

 

 
<fieldset> 
 
<legend> Your General Details </legend> 
 
<label for="tname"> Name: </label> 
 
<input type="text" id="tname" name="tname" 
 

 
placeholder="Your Full Name" required> 
 

 

 
<br> 
 
<label for="gender" > Gender: </label> 
 

 

 
<input type="radio" name="malegender" id="male" required 
 

 
> 
 
<label for="male" class=widthclass> Male </label> 
 

 
<input type="radio" name="femalegender" id="female" 
 

 
required> 
 
<label for="female" class=widthclass > Female </label> 
 

 

 
<br> 
 
<label for="age" >Age: </label> 
 
<input type="number" id="age" name="age" required> 
 

 

 
<br> 
 
<label for="birthday"> Date of birth: </label> <input 
 

 
type="date" name="birthday" id="birthday" required> 
 

 
<br> 
 
<label for="favoriteColor"> Favorite color: </label> 
 
<input type="color" name="color" id="color"> 
 

 
<br> 
 
<label for="whichCountry"> Which country: </label> 
 
    <select name="country"> 
 
    <option></option> 
 
    <option value="noSelection"> no selection </option> 
 
    <option value="u.s." > United States </option> 
 
    <option value="france"> France </option> 
 
    <option value="germany"> Germany </option> 
 
    <option value="england"> England </option> 
 
    <option value="china"> China </option> 
 
    <option value="japan"> Japan </option>    
 
    </select> 
 

 
</fieldset> 
 

 
<fieldset> 
 

 
<lengend>Your indicators</lengend> 
 
<br> 
 

 
<label for="height" > Height:</label> 
 
<div class="rangeLow"> Short </div> 
 

 
<input type="range" min="0" max="100" step="5" 
 

 
name="height id=height" > 
 
<div class="rangeHigh"> Tall </div> 
 

 

 

 
<br> 
 
<label for="salary" > Salary:</label> 
 
<div class="rangeLow"> Poor </div> 
 
<input type="range" min="0" max="100" step="5" 
 

 
name="height" id=salary" > 
 
<div class="rangeHigh"> Rich </div> 
 

 
</fieldset> 
 

 
<fieldset> 
 
<lengend>Your contact information</lengend> 
 

 
<br> 
 
<label for="email" > Email: <label> <input type="email" 
 

 
id="email" name="email" required> 
 

 
<br> 
 
<label for="mobile"> Mobile: </label> 
 
<input type="tel" id="mobile" name="mobile" > 
 

 
<br> 
 
<label for="address" > Address </label> 
 
<textarea rows="3" cols="60" id="address" 
 

 
name="address"class="textareaFormat"> 
 
</textarea> 
 
<br> 
 

 

 
<label for="contact_method"> Method to contact you: 
 

 
</label> 
 

 
<input type="checkbox" name="contactmethod" 
 

 
value="email" id="checkboxemail"> 
 
<label for="checkboxemail" class="widthclass"> Email 
 

 
</label> 
 

 

 
<input type="checkbox" name="contactmethod" 
 

 
value="Whatsapp" > 
 

 
<label for="checkboxwhatsapp" class="widthclass" > 
 

 
Whatsapp </label> 
 

 
<input type="checkbox" name="contactmethod" 
 

 
value="inappchat" > 
 

 
<label for="checkboxinappchat" class="widthclass" > 
 

 
In-app chat </label> 
 

 
</fieldset> 
 

 
<input type="submit" value=Submit" > 
 

 
</FORM> 
 

 
<script 
 

 
src="https://www.cse.ust.hk/~rossiter/dating_web_site.js 
 

 
"></script>

Answer 1

你做了错误的电子邮件不会关闭标签标记，以便它是开放的，以文件结束作为内联块：

错误：

<label for="email" > Email: <label> 

correct：

<label for="email" > Email: </label> 

Answer 2

您的代码充满了错误。

比如你有这样的多标签开口......

<label for="email" > Email: <label> <input type="email" 

id="email" name="email" required> 

<br> 
<label for="mobile"> Mobile: </label> 

...你不要在任何地方关闭它。

你也有这样的事情：

<input type="range" min="0" max="100" step="5" 

name="height id=height" > <!-- it should be name="height" id="height" --> 

这里是固定码https://jsfiddle.net/3cxgb00g/

尝试使用标记验证器和先进的文本编辑器，它会显示在你的代码中的错误。