web-dev-qa-db-fra.com

Alignement radio / case à cocher en HTML / CSS

Quel est le moyen le plus propre d’aligner correctement les boutons/cases à cocher radio avec du texte? La seule solution fiable que j'utilise jusqu'à présent est basée sur des tableaux:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Cela peut être mal vu par certains. Je viens de passer (encore une fois) à enquêter sur une solution sans tableau, mais j’ai échoué. J’ai essayé diverses combinaisons de flotteurs, de positionnement absolu/relatif et d’approches similaires. Non seulement ils s'appuyaient en silence sur une hauteur estimée des boutons/cases à cocher radio, mais ils se comportaient également différemment selon les navigateurs. Idéalement, j'aimerais trouver une solution qui n'assume rien sur les tailles ou les particularités du navigateur. L’utilisation de tables me convient, mais je me demande s’il existe une autre solution.

htmlcsscheckboxradio-button
78
Jan Zich

Je pense avoir enfin résolu le problème. Une solution couramment recommandée consiste à utiliser vertical-align: middle:

<input type="radio" style="vertical-align: middle"> Label

Le problème, cependant, est que cela produit toujours des défauts d'alignement visibles, même si cela devrait fonctionner en théorie. La spécification CSS2 dit que:

vertical-align: middle: Alignez le point médian vertical de la boîte avec la ligne de base de la boîte parente plus la moitié de la hauteur x du parent.

Donc, il devrait être au centre parfait (la hauteur x est la hauteur du caractère x). Cependant, le problème semble être dû au fait que les navigateurs ajoutent généralement des marges inégales aléatoires aux boutons radio et aux cases à cocher. On peut vérifier, par exemple dans Firefox avec Firebug, que la marge par défaut des cases à cocher dans Firefox est 3px 3px 0px 5px. Je ne sais pas d'où ça vient, mais les autres navigateurs semblent avoir des marges similaires. Donc, pour obtenir un alignement parfait, il faut se débarrasser de ces marges:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Il est toujours intéressant de noter que dans la solution basée sur le tableau, les marges sont en quelque sorte mangées et que tout s'aligne bien.

119
Jan Zich

Ce qui suit fonctionne dans Firefox et Opera (désolé, je n’ai pas accès à d’autres navigateurs pour le moment):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

Le CSS:

.form-field * {
    vertical-align: middle;
}
31
sids

J'ai trouvé le moyen le plus simple et le plus simple de le faire, car vous n'avez pas besoin d'ajouter des étiquettes, des divs ou quoi que ce soit.

input { vertical-align: middle; margin-top: -1px;}

13
Dario

Je n'utiliserais pas de tables pour cela. CSS peut facilement le faire.

Je ferais quelque chose comme ça:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Remarque: j'ai utilisé la classe clearfix de: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
6
Keith Donegan

C'est un peu un bidouillage, mais ce CSS semble le rendre très bien fonctionner dans tous les navigateurs de la même façon que d'utiliser des tableaux (à l'exception de chrome)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Assurez-vous que vous utilisez des étiquettes avec vos radios pour que cela fonctionne. c'est à dire.

<option> <label>My Radio</label>
4
Justin Vincent

Si votre étiquette est longue et continue sur plusieurs lignes, définissez la largeur et l'affichage: inline-block vous aidera.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>
3
Mika

J'ai trouvé que la meilleure solution consistait à donner à l'entrée une hauteur correspondant à l'étiquette. Au moins, cela a résolu mon problème d'incohérences dans Firefox et IE.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>
2
Angus

Le code suivant devrait fonctionner :)

Cordialement,

 
 <style type = "text/css"> 
 entrée [type = case à cocher] {
 margin-bottom: 4px; 
 vertical- align: middle; 
} 
 
 étiquette {
 vertical-align: middle; 
} 
 </ style> 
 
 
 <input id = "checkBox1" type = "case à cocher" /> <label pour = "checkBox1"> Afficher les actifs </ label> <br /> 
 <input id = "checkBox2" type = "checkbox" /> <label pour = "checkBox2"> Afficher les détecteurs </ label> <br />
2
Kin

C'est une solution simple qui a résolu le problème pour moi:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet Explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}
1
Dunx

Ci-dessous, je vais insérer une case à cocher dynamiquement. Le style est inclus pour aligner la case à cocher et le plus important pour s'assurer que le retour à la ligne est droit. Le plus important ici est l'affichage: table-cellule; pour l'alignement

Le code de base visuel.

'le code pour insérer dynamiquement une case à cocher

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'créer la case à cocher

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'connecter la case à cocher

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'le style pour la case à cocher

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

et la sortie HTML

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>
1
eilering

@sfjedi

J'ai créé une classe et lui ai assigné les valeurs css.

.radioA{
   vertical-align: middle;
}

Cela fonctionne et vous pouvez le vérifier dans le lien ci-dessous. http://jsfiddle.net/gNVsC/ J'espère que cela a été utile.

1
Fight code with code

Il y a plusieurs façons de l'implémenter:

  1. Pour ASP.NET Standard CheckBox:

    .tdInputCheckBox
{ 
position:relative;
top:-2px;
}
<table>
        <tr>
            <td class="tdInputCheckBox">                  
                <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
            </td>
        </tr>
</table>

  2. Pour DevExpress CheckBox:

    <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>

  3. Pour RadioButtonList:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

  4. Pour les validateurs de champs obligatoires:

    <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
1
Ajay Shankar