Ausrichtung von Radio / Kontrollkästchen in HTML / CSS


79

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.


Sie sollten Ihre Frage bearbeiten, um deutlich zu machen, dass Sie "in HTML" meinen. Ich wollte Ihre Frage für Java beantworten ...
Richard T

3
Ich hoffe, @Richard T meinte JavaScript
QueueHammer

1
Ich habe ein JSFIddle eingerichtet, um einige der Vorschläge zu veranschaulichen: jsfiddle.net/casebash/XNJxT/906
Casebash

"richtig ausrichten, was meinst du? Was zählt als richtig ausgerichtet?
Raedwald

Sie können in Prozent ausrichten: für mich selbst verwende ich: vertikal ausrichten: -15%; auf dem Eingabe-Tag
PhilMaGeo

Antworten:


121

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.


4
Wirklich schöne Antwort - gut recherchiert und es funktioniert. Je mehr ich mir CSS anschaue, desto mehr lokalisierte Rand- und Auffülleinstellungen scheinen der Schlüssel zu sein. Vielen Dank!
Penderi

Ab dem
Chris

5
einige nette CSS dafür, so dass Sie nicht jede Schaltfläche und jedes Feld formatieren müssen - Eingabe [Typ = "Radio"], Eingabe [Typ = "Kontrollkästchen"] {vertikal ausrichten: Mitte; Rand: 0px; }
Perilandmishap

4
Zu Ihrer Information, der px nach 0 ist redundant. Wenn der CSS-Wert 0 ist, spielt die Einheit keine Rolle, margin:0würde also ausreichen.
jedmao

2
Denken Sie daran, die vertical-alignanderen Elemente in derselben Zeile (z. B. :) zu überprüfen, <label>wenn Sie diese Lösung verwenden.
Diogo Kollross

31

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 verstehe nicht, warum Ihre Antwort nicht akzeptiert wurde, es ist die einfachste funktionierende für alle gängigen Browser (Stand 18.Apr.2010)
Chris

7
Bitte beachten Sie, dass der DOKTYP Ihres Dokuments STRENG sein sollte, um die Auswirkungen von VERTICAL-ALIGN zu sehen.

4
Ich denke, der Grund, warum dies nicht als Antwort akzeptiert wurde, ist, dass, wie die ausgewählte Antwort sagt, einige Browser asymmetrische Randwerte hinzufügen, die diesen Ansatz daran hindern, zu funktionieren.
DaveyDaveDave

13

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


Es ist der Rand oben: -1px; Das ist die zusätzliche Sauce, die meine Stimme bekommt. Ich habe ein Radio in einer Zeitspanne, die ich als Knopf benutze. Wenn Sie nur die vertikale Ausrichtung für den Radio-Stil festlegen, überschreitet das Radio gerade den unteren Bereich der Spanne. Wenn Sie die vertikale Ausrichtung in den Span-Stil versetzen, bleibt die Schaltfläche oben. Nur die Randoberseite scheint keine Wirkung zu haben. Aber setzen sie zusammen und voila
gordon

Was macht der -1px?
Casebash

-1. Dies ist eine schlechte Idee. Sie verursachen eine Verschiebung des Funkelements, wodurch es nicht mit den anderen umgebenden Elementen ausgerichtet wird. Probieren Sie es mit mehreren Radioeingängen nacheinander mit anderen Elementen an den Seiten aus.
Codenamezero

6

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

Vielen Dank für die Antwort, aber ich fürchte, es löst das Ausrichtungsproblem nicht. Ich hätte klarer sein sollen. Mein Ziel ist es, die Kontrollkästchen / Optionsfelder vertikal an ihren Beschriftungen auszurichten.
Jan Zich

Sie können dies mit meinem Code tun. Spielen Sie mit dem Rand auf dem Etikett, und Sie können diesen auch zum Eingabeelement hinzufügen, wenn Sie möchten. Also das Label {margin: 10px 0px 0px 10px; float: left; } würde die Beschriftung um 10 Pixel nach unten drücken.
Keith Donegan

3
Sie können dies tun, aber einer der Punkte in der ursprünglichen Frage war, nichts über die Größe von Optionsfeldern / Kontrollkästchen anzunehmen. Höchstwahrscheinlich war meine Frage zu optimistisch.
Jan Zich

4

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>

Die Mediensache hat mir bei mobilen Geräten sehr geholfen. Danke!
Sven van Zoelen

3

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>

2

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>

Passende Höhe reparierte meine Radios. Keine Kontrollkästchen, aber keine Sorge, da unsere site.css ziemlich komplex ist.
SushiGuy

2

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

1

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

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

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>



Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.