HTML要素の位置合わせの問題とラベルと入力

Question

フォークス： 私は https://www.coursera.org/learn/html-css-javascript/peer/biy2Z/dating-web-site-assessment

1として、出会い系サイトを構築するためにHTMLの練習をしようとしています）ラベル「電子メール」、「モバイル」、との「住所」 「あなたの連絡先情報」は、対応する入力要素と同じ行にありません。これを引き起こしたコードの何が問題なのでしょうか？

2）「あなたに連絡する方法：Email Whatsapp In-appチャット」、「In-appチャット」の2番目の行に同じ問題があります。以下

コードです：

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> 

正しい：

<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/

であるあなたのコード内のエラーを表示しますマークアップバリデータと高度なテキストエディタを使用してみてください。