Ausrichtung von Radio / Kontrollkästchen in HTML / CSS

Was ist der sauberste Weg, um Optionsfelder / Kontrollkästchen richtig am Text auszurichten? Die einzige zuverlässige Lösung, die ich bisher verwendet habe, ist tabellenbasiert:

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

Dies kann von einigen missbilligt werden. Ich habe gerade (wieder) einige Zeit damit verbracht, eine tabellenlose Lösung zu untersuchen, bin aber gescheitert. Ich habe verschiedene Kombinationen von Floats, absoluter / relativer Positionierung und ähnlichen Ansätzen ausprobiert. Sie verließen sich nicht nur meistens stillschweigend auf eine geschätzte Höhe der Optionsfelder / Kontrollkästchen, sondern verhielten sich auch in verschiedenen Browsern unterschiedlich. Im Idealfall möchte ich eine Lösung finden, die nichts über Größen oder spezielle Browser-Macken annimmt. Ich kann keine Tabellen verwenden, aber ich frage mich, wo es eine andere Lösung gibt.

Ich denke, ich habe das Problem endlich gelöst. Eine häufig empfohlene Lösung ist die vertikale Ausrichtung: Mitte:

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

Das Problem ist jedoch, dass dies immer noch sichtbare Fehlausrichtungen erzeugt, obwohl es theoretisch funktionieren sollte. Die CSS2-Spezifikation besagt Folgendes:

Vertikal ausrichten: Mitte: Richten Sie den vertikalen Mittelpunkt des Felds an der Grundlinie des übergeordneten Felds plus der halben x-Höhe des übergeordneten Felds aus.

Es sollte sich also in der perfekten Mitte befinden (die x-Höhe ist die Höhe des Zeichens x). Das Problem scheint jedoch darauf zurückzuführen zu sein, dass Browser Optionsfeldern und Kontrollkästchen häufig zufällige ungleichmäßige Ränder hinzufügen. Man kann beispielsweise in Firefox mit Firebug überprüfen, ob der Standard-Kontrollkästchenrand in Firefox ist 3px 3px 0px 5px. Ich bin nicht sicher, woher es kommt, aber die anderen Browser scheinen ähnliche Ränder zu haben. Um eine perfekte Ausrichtung zu erhalten, müssen diese Ränder entfernt werden:

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

Es ist immer noch interessant festzustellen, dass in der tabellenbasierten Lösung die Ränder irgendwie gegessen werden und alles gut ausgerichtet ist.

Folgendes funktioniert in Firefox und Opera (leider habe ich derzeit keinen Zugriff auf andere Browser):

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

Das CSS:

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

Ich fand den besten und einfachsten Weg, dies zu tun, weil Sie keine Labels, Divs oder was auch immer hinzufügen müssen.

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

Ich würde dafür überhaupt keine Tabellen verwenden. CSS kann dies leicht tun.

Ich würde so etwas machen:

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

Hinweis: Ich habe die Clearfix-Klasse von http://www.positioniseverything.net/easyclearing.html verwendet

.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 */

Dies ist ein kleiner Hack, aber dieses CSS scheint es in allen Browsern sehr gut zum Laufen zu bringen, genauso wie bei der Verwendung von Tabellen (außer 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; }
}

Stellen Sie sicher, dass Sie mit Ihren Radios Etiketten verwenden, damit es funktioniert. dh

<option> <label>My Radio</label>

Wenn Ihr Etikett lang ist und mehrere Zeilen umfasst, stellen Sie die Breite und Anzeige ein: Inline-Block hilft.

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

Ich fand die beste Lösung dafür, der Eingabe eine Höhe zu geben, die der Beschriftung entspricht. Zumindest hat dies mein Problem mit Inkonsistenzen in Firefox und IE behoben.

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>

Der folgende Code sollte funktionieren :)

Grüße,

<style type = "text / css">
Eingabe [Typ = Kontrollkästchen] {
    Rand unten: 4px;
    vertikal ausrichten: Mitte;
}}

Etikette {
    vertikal ausrichten: Mitte;
}}
</ style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Assets anzeigen </ label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Detektoren anzeigen </ label> <br />

Dies ist eine einfache Lösung, die das Problem für mich gelöst hat:

label 
{

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

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

padding-bottom:7px; 

}

Es gibt verschiedene Möglichkeiten, dies zu implementieren:

1. Für 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. Für DevExpress CheckBox:

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

3. Für RadioButtonList:

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

4. Für erforderliche Feldvalidatoren:

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

Unten werde ich ein Kontrollkästchen dynamisch einfügen. Der Stil ist enthalten, um das Kontrollkästchen auszurichten, und der wichtigste, um sicherzustellen, dass der Zeilenumbruch gerade ist. Das Wichtigste hier ist die Anzeige: Tabellenzelle; für die Ausrichtung

Der visuelle Grundcode.

'der Code zum dynamischen Einfügen eines Kontrollkästchens

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

'Erstellen Sie das Kontrollkästchen

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

'Verbinden Sie das Kontrollkästchen

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

'der Stil für das Kontrollkästchen

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%;}

und die HTML-Ausgabe

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

@sfjedi

Ich habe eine Klasse erstellt und ihr die CSS-Werte zugewiesen.

.radioA{
   vertical-align: middle;
}

Es funktioniert und Sie können es unter dem folgenden Link überprüfen. http://jsfiddle.net/gNVsC/ Hoffe, es war nützlich.