1

私はこれについて疑問に思っていました。コントロールを内部に配置すると、tdの配置が影響を受けるのはなぜですか。

例えば。

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

「行1 」のテキストは「選択された値1 」に揃えられます。ただし、「Selected Value 2」というテキストは少し下にあり、中央に配置されておらず、「Row2 」と整列していません。

私はすでにミドルまたはバラインを垂直に揃えようとしましたが、機能しません。IEとFirefoxの両方で発生します。それはIEでより明白です。私は本当にこれを取得しません。

4

3 に答える 3

1

入力コントロールの行の高さは、標準のテキストとは異なります。したがって、これらをネイティブにインラインでテキストの横に配置すると、ベースライン/行の高さが、それがない場合のテキストの動作とは異なる動作になります。これは、画像をフローティングせずにテキストの横に配置した場合にも発生します（テキストは、次の行に折り返されるまで、画像の下部に揃えられます）。

入力コントロールを左にフロートさせるかline-height、テキストのを変更することで、これを回避できるはずです。

編集：これは私にとってはうまくいくようでした。

<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>
于 2009-12-21T04:48:04.183 に答える
1

これは、2行目のコンポーネントがテキストと「インライン」で表示されており、コンポーネントの高さがテキストの行の高さよりも大きいためです。

すべてのテキストの行の高さをより大きな値に変更すると、それらはすべて整列します。

td  {line-height:500%;}
于 2009-12-21T04:50:25.770 に答える
0

td内の他のコントロールに垂直に配置された中央を追加しようとすると、すべてが中央に設定されているようです。IEの奇妙な動作ですが、問題は解決しました。

<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>
于 2009-12-24T01:06:01.453 に答える