Anzeige von Text und Bild-Eingabe inline in Tabelle

Question

Hallo Ich möchte in einer Tabelle wie folgt einen Text und Bild-Eingabe angezeigt werden:

ich diesen Code versucht habe:

<tbody> 
      <tr> 
       <td class="inputs"> 
        <input type="text" id="input1" size="3"/> 
       </td> 
       <td class="inputs"> 
        <input type="text" id="input2" /> 
       </td> 
       <td class="inputs"> 
        <input type="text" id="input3" size="10"/> 
       </td> 
       <td class="inputs"> 
        <input type="text" id="input4" size="8"/> 
        <input type="image" src="button.png" /> 
       </td> 
       <td class="inputs"> 
        <input type="text" id="input5" size="10"/> 
       </td> 
       <td class="inputs"> 
        <input type="checkbox" id="input6" /> 
       </td> 
      </tr> 

aber das Ergebnis ist folgendes:

Irgendwelche Ideen, wie das zu beheben ist? Bitte helfen Sie!

Answer 1

Vertikale Ausrichtung ist das Problem hier. Geben Sie einfach vertical-align: top auf input Elemente innerhalb Tabellenzellen, und sie werden alle in die gleiche Position (oben, in diesem Fall) ausrichten:

td input { 
    vertical-align: top; 
}