HTML — выравнивание переключателей и текста

Допустим, у вас есть две простые ячейки таблицы, расположенные рядом друг с другом.
Одна содержит переключатель и текст. Другой содержит только текст.

Размер переключателя установлен на 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? Серьезно?

Остальные выглядят достаточно близко, но любые попытки выровнять текст всегда приводили к тому, что он всегда выглядел ужасно по крайней мере в 2 из 4 браузеров.


browser vertical-alignment html alignment radio-button
person mjomble    schedule 30.06.2010    source источник
comment
Примечание: почему вы используете для этого таблицы? Это так 90-е ;) Вместо этого используйте плавающие элементы div!   -  person Dan Burton    schedule 01.07.2010

Ответы (5)


arrow_upward
2
arrow_downward

Погуглив «vertical-align:middle», нашел это краткое объяснение от Гэвина Кистнера, что полезно. Я опробовал последнее предложение на этой странице, которое, кажется, хорошо отображается в Chrome, IE, Firefox, Opera и Safari.

Что я сделал, так это добавил td{ line-height:1.5em } - см. ссылку для объяснения.

person Dan Burton    schedule 30.06.2010

arrow_upward
2
arrow_downward

Быстрое решение состоит в том, чтобы сделать равными 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;
}
person tcooc    schedule 30.06.2010
comment
@Gert G: Интересно, думаю, рендеринг moz css отличается от webkit. Вернемся к мастерингу. - person tcooc; 01.07.2010
comment
этот совет отлично сработал для меня в FF и Chrome... еще не тестировал в IE (я не использую таблицы)... Спасибо! - person jason; 30.05.2011
comment
Это не будет выглядеть красиво на экранах с высоким разрешением :/ - person Emmanuel Bourg; 16.10.2012

arrow_upward
1
arrow_downward 

<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

Почему бы вам не поместить текст в отдельную колонку.

person gblazex    schedule 30.06.2010
comment
это работает до тех пор, пока он не захочет ввести заполнение, после чего первый диапазон будет казаться отдельным элементом, а не связанным с переключателем - person alex; 01.07.2010
comment
дайте ему класс, чем с padding:0; - person gblazex; 01.07.2010

arrow_upward
0
arrow_downward

Один из способов добиться этого — добавить вложенную таблицу в первую из двух ячеек и поместить переключатель и первый диапазон в две ячейки (внутри вложенной таблицы).

<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>
person alex    schedule 30.06.2010
comment
Потому что таблицы были изобретены как инструмент дизайна. ;) - person Gert Grenander; 01.07.2010
comment
На самом деле внешняя таблица была вполне оправдана (в исходной задаче, из которой я взял этот пример), поскольку мне нужно было упорядочить содержимое в реальной сетке. Так что я все же хотел бы держаться подальше от этих внутренних хак-таблиц :) Но в любом случае, я уже получил ответ, который решил проблему. - person mjomble; 01.07.2010

arrow_upward
0
arrow_downward

Быстрые снимки в темноте:

  • Дать элементу ввода радио собственную ячейку таблицы? Тогда, по крайней мере, тексты должны совпадать друг с другом.
  • Поставить vertical-align:middle; в td вместо .radio? Может все еще вызывать проблемы, потому что базовая линия текста в ячейке с элементом ввода радио может все еще определяться элементом ввода...
person orithena    schedule 30.06.2010