Wyrównanie radia / pola wyboru w HTML / CSS


79

Jaki jest najczystszy sposób na prawidłowe wyrównanie przycisków opcji / pól wyboru z tekstem? Jedyne niezawodne rozwiązanie, z którego do tej pory korzystałem, to tabelaryczne:

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

Niektórzy mogą na to patrzeć. Właśnie spędziłem trochę czasu (ponownie) na badaniu rozwiązania beztabelowego, ale nie udało mi się. Próbowałem różnych kombinacji pływaków, pozycjonowania bezwzględnego / względnego i podobnych podejść. Nie tylko, że w większości polegali po cichu na szacowanej wysokości przycisków radiowych / pól wyboru, ale także zachowywali się inaczej w różnych przeglądarkach. Idealnie, chciałbym znaleźć rozwiązanie, które nie zakłada niczego na temat rozmiarów ani specjalnych dziwactw przeglądarki. Nie przeszkadza mi używanie tabel, ale zastanawiam się, gdzie jest inne rozwiązanie.


Powinieneś zmienić swoje pytanie, aby było jasne, że masz na myśli „w HTML”. Miałem odpowiedzieć na twoje pytanie dotyczące Javy ...
Richard T

3
Mam nadzieję, że @Richard T miał na myśli JavaScript
QueueHammer

1
Ustawiłem JSFIddle, aby zilustrować niektóre sugestie: jsfiddle.net/casebash/XNJxT/906
Casebash

„wyrównaj prawidłowo, co masz na myśli? Co liczy się jako prawidłowo wyrównane?
Raedwald,

możesz wyrównać w procentach: dla siebie używam: vertical-align: -15%; na tagu wejściowym
PhilMaGeo

Odpowiedzi:


121

Myślę, że w końcu rozwiązałem problem. Jednym z powszechnie zalecanych rozwiązań jest użycie wyrównania w pionie: do środka:

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

Problem polega jednak na tym, że nadal powoduje to widoczne przesunięcia, mimo że teoretycznie powinno to działać. Specyfikacja CSS2 mówi, że:

vertical-align: middle: Wyrównaj pionowy punkt środkowy prostokąta z linią bazową ramki nadrzędnej plus połowę wysokości x elementu nadrzędnego.

Powinien więc znajdować się w idealnym środku (wysokość x to wysokość znaku x). Jednak problem wydaje się być spowodowany faktem, że przeglądarki często dodają losowe nierówne marginesy do przycisków opcji i pól wyboru. Można sprawdzić np. W Firefoksie za pomocą Firebuga, czy domyślny margines pola wyboru w Firefoksie to 3px 3px 0px 5px. Nie jestem pewien, skąd się bierze, ale inne przeglądarki również wydają się mieć podobne marginesy. Aby uzyskać idealne wyrównanie, należy pozbyć się tych marginesów:

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

Nadal warto zauważyć, że w rozwiązaniu opartym na tabeli marginesy są jakoś zjadane i wszystko ładnie się układa.


4
Naprawdę fajna odpowiedź - dobrze zbadana i działa. Im więcej patrzę na CSS, tym bardziej zlokalizowane ustawienia marginesów i dopełnienia wydają się być kluczowe. Dzięki!
penderi

od 18 kwietnia 2010 to rozwiązanie nie działa w przeglądarce Firefox 3.6.3 dla wygranej
Chris

5
trochę fajnego css do tego, więc nie musisz stylizować każdego przycisku i pola - input [type = "radio"], input [type = "checkbox"] {vertical-align: middle; margines: 0px; }
perilandmishap

4
FYI, piksel po 0 jest zbędny. Gdy wartość CSS wynosi 0, jednostka nie ma znaczenia, więc margin:0wystarczy.
jedmao

2
Pamiętaj, aby przy tym rozwiązaniu sprawdzić vertical-alignpozostałe elementy w tej samej linii (np <label>.:).
Diogo Kollross

31

Następujące działa w Firefox i Opera (przepraszam, nie mam w tej chwili dostępu do innych przeglądarek):

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

CSS:

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

nie rozumiem, dlaczego Twoja odpowiedź nie została zaakceptowana, jest to najprostsza z możliwych dla wszystkich głównych przeglądarek (stan na
Chris

7
Zwróć uwagę, że DOCTYPE twojego dokumentu powinien być ŚRCIĄGŁY, aby zobaczyć efekty VERTICAL-ALIGN.

4
Myślę, że powodem tego, że nie przyjęto tego jako odpowiedź, jest to, że, jak mówi wybrana odpowiedź, niektóre przeglądarki dodają asymetryczne wartości marginesów, które uniemożliwiają to podejście.
DaveyDaveDave,

13

Znalazłem najlepszy i najłatwiejszy sposób na zrobienie tego, ponieważ nie musisz dodawać etykiet, elementów div ani niczego innego.

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


To margines górny: -1px; to dodatkowy sos, za który głosuję. Mam radio w zakresie, którego używam jako przycisku. ustawienie tylko wyrównania w pionie dla stylu radia powoduje, że radio przechodzi tylko przez dolną część zakresu. umieszczenie wyrównania w pionie w stylu span pozostawia przycisk na górze. Wydaje się, że tylko górna krawędź nie ma żadnego efektu. Ale połącz je razem i voila
gordon

-1. To zły pomysł, powodujesz przesunięcie elementu radiowego, co powoduje, że nie jest on wyrównany z innymi otaczającymi elementami. Spróbuj z kilkoma wejściami radiowymi jeden po drugim z innymi elementami po bokach.
codenamezero

6

W ogóle nie użyłbym do tego tabel. CSS może to łatwo zrobić.

Zrobiłbym coś takiego:

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

Uwaga: użyłem klasy clearfix z: 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 */

Dziękuję za odpowiedź, ale obawiam się, że to nie rozwiązuje problemu z wyrównaniem. Powinienem był być wyraźniejszy. Moim celem jest wyrównanie w pionie pól wyboru / przycisków opcji z ich etykietami.
Jan Zich

Możesz to zrobić za pomocą mojego kodu. Pobaw się marginesem na etykiecie, a jeśli chcesz, możesz również dodać to do elementu wejściowego. Czyli etykieta {margin: 10px 0px 0px 10px; float: left; } spycha etykietę w dół o 10 pikseli.
Keith Donegan

3
Możesz to zrobić, ale jednym z punktów pierwotnego pytania nie było założenie niczego o rozmiarach przycisków radiowych / pól wyboru. Najprawdopodobniej moje pytanie było zbyt optymistyczne.
Jan Zich

4

To trochę hack, ale ten CSS wydaje się działać bardzo dobrze we wszystkich przeglądarkach, tak samo jak przy użyciu tabel (z wyjątkiem 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; }
}

Upewnij się, że używasz etykiet z radiotelefonami, aby działały. to znaczy

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

Media bardzo mi pomogły w przypadku urządzeń mobilnych. Dzięki!
Sven van Zoelen

3

Jeśli twoja etykieta jest długa i znajduje się w wielu wierszach, ustaw szerokość i sposób wyświetlania: inline-block pomoże.

.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

Uważam, że najlepszym rozwiązaniem jest nadanie wartości wejściowej wysokości zgodnej z etykietą. Przynajmniej to rozwiązało mój problem z niespójnościami w przeglądarkach Firefox i 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>

Dopasowana wysokość naprawiła moje radia. Nie ma pól wyboru, ale nie martwi się, ponieważ nasz plik site.css jest dość złożony.
SushiGuy

2

Poniższy kod powinien działać :)

Pozdrowienia,


<style type = "text / css">
input [type = checkbox] {
    margin-bottom: 4px;
    Vertical-align: do środka;
}

label {
    Vertical-align: do środka;
}
</style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Pokaż zasoby </label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Pokaż detektory </label> <br />

1

To proste rozwiązanie, które rozwiązało problem za mnie:

label 
{

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

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

padding-bottom:7px; 

}

1

Istnieje kilka sposobów, aby to zaimplementować:

  1. W przypadku standardowego pola wyboru ASP.NET:

    .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. Dla DevExpress CheckBox:

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

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. W przypadku wymaganych walidatorów pól:

    <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

Poniżej wstawię dynamicznie checkbox. Styl jest dołączony, aby wyrównać pole wyboru, a co najważniejsze, aby upewnić się, że zawijanie słów jest proste. najważniejszą rzeczą tutaj jest wyświetlanie: tabela-komórka; do wyrównania

Wizualny kod podstawowy.

'kod do dynamicznego wstawiania pola wyboru

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

'utwórz pole wyboru

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

'połącz pole wyboru

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

'styl pola wyboru

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

i wyjście 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>



Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.