it-swarm.com.de

Radio / Checkbox Ausrichtung in HTML / CSS

Was ist die sauberste Methode, um Optionsfelder/Kontrollkästchen richtig an 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 (noch einmal) eine tabellenlose Lösung untersucht, bin jedoch gescheitert. Ich habe verschiedene Kombinationen von Floats, absoluter/relativer Positionierung und ähnlichen Ansätzen ausprobiert. Sie verließen sich nicht nur größtenteils auf die geschätzte Höhe der Optionsfelder/Kontrollkästchen, sondern verhielten sich auch in verschiedenen Browsern unterschiedlich. Im Idealfall würde ich gerne 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.

78
Jan Zich

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

<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 auf die Tatsache zurückzuführen zu sein, dass Browser Optionsfeldern und Kontrollkästchen häufig zufällige, ungleichmäßige Ränder hinzufügen. Man kann zum Beispiel in Firefox mit Firebug überprüfen, ob der Standardrand der Checkbox in Firefox 3px 3px 0px 5px Ist. Ich bin nicht sicher, woher es kommt, aber die anderen Browser scheinen ähnliche Ränder zu haben. Um eine perfekte Ausrichtung zu erzielen, müssen die folgenden 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 aufgebraucht sind und alles gut zueinander passt.

119
Jan Zich

Das Folgende funktioniert in Firefox und Opera (Entschuldigung, ich habe momentan 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;
}
31
sids

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

13
Dario

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 */
6
Keith Donegan

Dies ist ein kleiner Hack, aber dieses CSS scheint es in allen Browsern sehr gut zum Laufen zu bringen, genauso wie das Verwenden von Tabellen (mit Ausnahme von 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 Etiketten mit Ihren Funkgeräten verwenden, damit es funktioniert. d.h.

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

Wenn Ihre Beschriftung lang und mehrzeilig ist und die Breite und Anzeige festlegt, hilft der Inline-Block.

.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

Ich fand die beste Lösung dafür, der Eingabe eine Höhe zu geben, die mit der Bezeichnung übereinstimmt. Zumindest behebt dies mein Problem mit Inkonsistenzen in Firefox und 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

Der folgende Code sollte funktionieren :)

Grüße,


 
 <style type = "text/css"> 
 input [type = checkbox] {
 margin-bottom: 4px; 
 vertical- ausrichten: Mitte; 
} 
 
 Etikett {
 vertikal ausrichten: Mitte; 
} 
 </ style> 
 
 
 <input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Elemente anzeigen </ label> <br /> 
 <input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Melder anzeigen </ label> <br /> 
2
Kin

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; 

}
1
Dunx

Im Folgenden werde ich ein Kontrollkästchen dynamisch einfügen. Es ist ein Stil zum Ausrichten des Kontrollkästchens enthalten und das Wichtigste, um sicherzustellen, dass der Zeilenumbruch gerade ist. Das Wichtigste hier ist die Anzeige: Tabellenzelle; für die Ausrichtung

Der visuelle Basiscode.

'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

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

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

nd 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>
1
eilering

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

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>`
    
1
Ajay Shankar