Mein HTML funktioniert nicht gemäß meinem Code

Question

Warum funktioniert mein HTML nicht nach meinem Code? Siehe JSFIDDLE hier.

Der Ausgang des ist

F (textbox)

L (textbox)

button

rechts ?. Was mache ich hier falsch?

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

tr ist kein gültiges Kind div hinzuzufügen. Verwenden Sie stattdessen table. Ebenso wie Ihre Schaltfläche fehlt ein td als Wrapper.

Beachten Sie, dass das Layout mit Tabellen normalerweise nicht der richtige Weg ist, es sei denn, Sie zeigen tatsächlich eine Tabelle an.

<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

Answer 2

Sie vergessen <table> Tag

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