Tabellenelement mit vertikaler Ausrichtungsänderung beim Hinzufügen Sonde in TD

Question

Ich habe darüber schon gewundert. Warum wird die Ausrichtung des td beeinträchtigt wird, wenn Kontrollen im Innern platzieren.

Zum Beispiel.

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" />
    <input type="button" value="Select" />
    Selected Value 2
  </td>
</tr>

Die " Zeile 1 " Text ausgerichtet ist " Ausgewählte Wert 1 ". Allerdings ist der Text " Ausgewählte Wert 2 " ist leicht nach unten und nicht zentriert und nicht ausgerichtet mit " Row 2 ".

Ich habe bereits versucht vertikal ausrichten Mitte oder sogar valign und es funktioniert nicht. Es geschieht in IE und Firefox. Es ist offensichtlich, im Internet Explorer. Ich weiß wirklich nicht bekommen diese.

Answer 1

Als ich versuchte, das Hinzufügen vertikal ausgerichtete Mitte auf die anderen Sonde in der td , es scheint, alle die in der Mitte zu setzen. Es ist eine seltsame Verhalten im IE, aber es hat mein Problem zu beheben.

<tr>
  <td>Row 1</td>
  <td>
    <input type="text" />
    <input type="button" value="Select" />
  </td>
  <td>Selected Value 1</td>
</tr>
<tr>
  <td>Row 2</td>
  <td colspan="2">
    <input type="text" style="vertical-align: middle;" />
    <input type="button" value="Select" style="vertical-align: middle;" />
    Selected Value 2
  </td>
</tr>

Answer 2

es ist, weil die Komponenten in der 2. Reihe angezeigt werden „inline“ mit dem Text und die Höhen der Komponenten größer als die Zeilenhöhe des Textes.

Wenn Sie die Zeilenhöhe für alle Teile des Textes auf einen größeren Wert geändert, sie würden alle Zeilen nach oben.

td  {line-height:500%;}

Answer 3

Die Eingangskontrollen haben unterschiedliche Linienhöhen von dem Standardtext. Also, wenn Sie diese platzieren, nativ inline, Kontrollen neben Text sie die Baseline / Lineheight zwingen, sich anders zu verhalten, als der Text, ohne es verhalten würde. Dies geschieht auch, wenn Sie ein Bild platzieren neben Text, ohne ihn zu schwimmend (der Text richtet sich mit dem unteren Rand des Bildes, bis es in die nächste Zeile umgebrochen wird).

Sie sollten Lage sein, dies zu umgehen, indem Sie Ihre Eingabe steuert nach links schwimmen, oder möglicherweise durch die line-height des Textes zu ändern.

Edit: Das ist für mich zu funktionieren scheint ..

<table>
    <tr>
        <td>Row 1</td>
        <td>
            <input type="text" />
            <input type="button" value="Select" />
        </td>
        <td>Selected Value 1</td>
    </tr>
    <tr>
        <td style="">Row 2</td>
        <td style="line-height: 120%" colspan="2">  
            <input type="text" />  
            <input type="button" value="Select" />  
            Selected Value 2
        </td>
    </tr>
</table>