HTML - alignement des boutons radio et de texte

Dire que vous avez deux simples cellules d'un tableau à côté de l'autre.
L'un contient un bouton radio et de texte. L'autre contient seulement du texte.

Le bouton radio de la taille est définie à 16x16 pixels (ne me demandez pas pourquoi, supposons que c'est juste).
La taille de la police est de 12 pixels.

Comment voulez-vous faire à la fois des étiquettes et le bouton radio à la ligne de manière cohérente dans tous les principaux navigateurs (ou raisonnablement proche possible de la verticale du milieu de la ligne du tableau?

Exemple de code HTML pour vous aider à démarrer:

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

Dans ma installé les versions de IE, Opera, Firefox et google Chrome, le ci-dessus rend comme cette

Le résultat que j'attends de voir, c'est celui qui est affiché à l'image de... ...c'est à dire? Sérieusement?

Le reste regarde d'assez près, mais toutes les tentatives que j'ai fait pour aligner le texte fait-il toujours l'air terrible dans au moins 2 des 4 navigateurs.

Note: pourquoi êtes-vous à l'aide de tableaux pour cela? C'est tellement années 90 😉 Utiliser des divs flottantes à la place!

OriginalL'auteur mjomble | 2010-06-30

  1. 2

    Googler "vertical-align:middle" trouvés cette courte explication par Gavin Kistner, ce qui est utile. J'ai essayé la suggestion finale sur cette page, qui semble rendre repectably dans Chrome, IE, Firefox, Opera, et Safari.

    Ce que j'ai fait a été d'ajouter td{ line-height:1.5em } - voir le lien pour les explications.

    Qui a fait le tour. Merci!

    OriginalL'auteur Dan Burton

  2. 2

    Une solution rapide est de faire de la font-size:12px; de la td et width:16px;height:16px; de la radio de l'égalité.

    2 exemples:

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

    et

    td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}
    G:il est Intéressant de deviner le moz css, le rendu est différent de webkit. De retour sur le bricolage.
    cette astuce a très bien fonctionné pour moi dans FF et Chrome... ne l'ai pas testé sous IE, mais je ne suis pas à l'aide de tableaux)... Merci!
    Cela n'est pas pour faire joli sur la haute résolution écran :/

    OriginalL'auteur tcooc

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

    Pourquoi ne pas vous mettre le texte dans sa propre colonne.

    qui fonctionne jusqu'à ce qu'il veut introduire rembourrage, à quel point le premier span semblent être son propre élément, plutôt que associé avec le bouton radio
    donner une classe avec padding:0;

    OriginalL'auteur gblazex

  4. 0

    Une façon d'y parvenir serait d'ajouter une table imbriquée à la première de vos deux cellules, et de mettre le bouton radio et de la première période de deux cellules (à l'intérieur de la table imbriquée)

    <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>
    Parce que les tables ont été inventés comme un outil de conception. 😉
    Sans blague, mais il est déjà à l'aide de tableaux, qui s'en soucie?
    La table externe était en fait assez justifiée (dans le problème original que j'ai tiré cet exemple) comme j'ai besoin d'en organiser le contenu en une véritable grille. Donc, je voudrais encore rester à l'écart de ces intérieure "hack " tables" 🙂 Mais de toute façon, j'ai déjà eu une réponse qui a résolu le problème.

    OriginalL'auteur alex

  5. 0

    Rapide de coups de feu dans l'obscurité:

    • Donner à la radio d'entrée de l'élément de sa propre cellule de tableau? Alors, au moins, le texte doit être aligné les uns avec les autres.
    • Mettre vertical-align:middle; à td au lieu de .radio? Peut encore causer des problèmes, parce que la ligne de base du texte dans la cellule avec la radio de l'élément d'entrée peut toujours être déterminé par l'élément d'entrée...

    OriginalL'auteur orithena