私のコードに基づいて私のHTMLが機能しない

Question

私のコードに従って自分のHTMLが機能しないのはなぜですか？ここではJSFIDDLEを参照してください。

の出力は

F (textbox)

L (textbox)

button

右です？。私はここで間違っていますか？あなたは<table>タグ

<div> 
 
<table> 
 

 

 
    <tr> 
 
     <td> 
 
      <label>F</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" style="width: 50px;" id="txtBS" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <label>L</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" style="width: 50px;" id="txtBSLName" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
    <td><button type="button" class="btn btn-primary" id="btnAlert"> 
 
    Add</button></td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

trを追加することを忘れ

<div> 
<tr> 
    <td> 
     <label>F</label> 
    </td> 
    <td> 
     <input type="text" style="width: 50px;" id="txtBS" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <label>L</label> 
    </td> 
    <td> 
     <input type="text" style="width: 50px;" id="txtBSLName" /> 
    </td> 
</tr> 
<tr> 
<button type="button" class="btn btn-primary" id="btnAlert"> 
    Add</button> 
</tr> 

Answer 2

はdivの有効な子ではありません。代わりにtableを使用してください。ボタンと同様に、ラッパーとしてtdがありません。

実際にテーブルを表示していない限り、テーブルを使ったレイアウトは通常は行かないことに注意してください。

<table> 
    <tr> 
     <td> 
      <label>F</label> 
     </td> 
     <td> 
      <input type="text" style="width: 50px;" id="txtBS" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label>L</label> 
     </td> 
     <td> 
      <input type="text" style="width: 50px;" id="txtBSLName" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <button type="button" class="btn btn-primary" id="btnAlert"> 
       Add 
      </button> 
     </td> 
    </tr> 
</table> 

JSFiddle