3

2 つの単純なテーブル セルが隣り合っているとします。
1 つには、ラジオ ボタンとテキストが含まれます。もう 1 つはテキストのみを含みます。

ラジオ ボタンのサイズは 16x16 ピクセルに設定されています (理由は聞かないでください。
フォント サイズは 12 ピクセルです。

ラベルとラジオ ボタンの両方を、すべての主要なブラウザで表の行の垂直方向の中央に沿って (またはほぼ中央に) 一貫して並べるにはどうすればよいでしょうか?

開始するためのサンプル HTML:

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

私がインストールした IE、Opera、Firefox、および Chrome のバージョンでは、上記は次のようにレンダリングされます。

私が期待している結果は、... ...IE? によってその画像に表示されるものです。真剣に？

残りは十分に似ていますが、テキストを並べようとすると、4 つのブラウザーのうち少なくとも 2 つでは常に見栄えが悪くなります。

4

5 に答える 5

2

「vertical-align:middle」をグーグルで検索すると、Gavin Kistner によるこの短い説明が見つかりました。これは便利です。そのページの最後の提案を試してみましたが、これは Chrome、IE、Firefox、Opera、および Safari で適切にレンダリングされるようです。

私がしたことは追加でしたtd{ line-height:1.5em }-説明についてはリンクを参照してください。

于 2010-06-30T20:23:52.157 に答える
2

簡単な修正はfont-size:12px;、td とwidth:16px;height:16px;無線の を等しくすることです。

2 つの例:

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

と

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}
于 2010-06-30T20:19:41.500 に答える
1 
<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

テキストを独自の列に入れてみませんか。

于 2010-06-30T20:12:57.393 に答える
0

これを実現する1つの方法は、ネストされたテーブルを2つのセルの最初のセルに追加し、ラジオボタンと最初のスパンを2つのセル（ネストされたテーブル内）に配置することです。

<table> 
  <tr> 
    <td> 
      <table><tr><td><input type="radio" class="radio" /></td>
      <td><span class="blah">O</span></td></tr></table>
    </td> 
    <td> 
      <span class="blah">O</span> 
    </td> 
  </tr> 
</table>
于 2010-06-30T20:07:35.133 に答える
0

暗闇の中でのクイックショット：

  • ラジオ入力要素に独自のテーブルセルを与えますか？次に、少なくともテキストは互いに整列する必要があります。
  • ？vertical-align:middle;のtd代わりに置く .radioラジオ入力要素を含むセル内のテキストのベースラインは、入力要素によって決定される可能性があるため、問題が発生する可能性があります。
于 2010-06-30T20:07:56.517 に答える