Pytanie Dopasowanie radiowe / checkbox w HTML / CSS


Jaki jest najczystszy sposób wyrównania odpowiednio przycisków radiowych / pól wyboru z tekstem? Jedynym niezawodnym rozwiązaniem, z którego korzystam do tej pory, jest tabela:

<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 bez tableless, ale nie udało mi się. Próbowałem różnych kombinacji pływaków, pozycjonowania absolutnego / względnego i podobnych podejść. Nie tylko dlatego, że w większości polegali oni po cichu na szacowanej wysokości przycisków / pól wyboru, ale zachowywali się inaczej w różnych przeglądarkach. Idealnie, chciałbym znaleźć rozwiązanie, które nie zakłada niczego na temat rozmiarów lub specjalnych dziwek przeglądarki. Używam tabel, ale zastanawiam się, gdzie jest inne rozwiązanie.


76
2017-12-28 17:40


pochodzenie


Powinieneś edytować swoje pytanie, aby było jasne, że masz na myśli "w HTML". Zamierzałem odpowiedzieć na twoje pytanie do Javy ... - Richard T
Mam nadzieję, że @Richard T oznaczał JavaScript - QueueHammer
... lub Swing .... - devios1
Ustawiłem JSFIddle, aby zilustrować niektóre z sugestii: jsfiddle.net/casebash/XNJxT/906 - Casebash
"prawidłowo wyrównaj, o co ci chodzi?" - Raedwald


Odpowiedzi:


Myślę, że w końcu rozwiązałem problem. Jednym z powszechnie zalecanych rozwiązań jest użycie vertical-align: middle:

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

Problem polega jednak na tym, że nadal powoduje to widoczne niewspółosiowości, mimo że teoretycznie powinien działać. Specyfikacja CSS2 mówi, że:

vertical-align: middle: Wyrównaj pionowy środek pudełka z linią podstawową pudełka nadrzędnego plus połowę wysokości x elementu nadrzędnego.

Powinien znajdować się w idealnym środku (wysokość x jest wysokością znaku x). Jednak problem wydaje się być spowodowany faktem, że przeglądarki często dodają losowe nierówne marginesy do przycisków radiowych i pól wyboru. Można sprawdzić, na przykład w Firefoksie używając Firebug, że domyślny margines pola wyboru w Firefoksie jest 3px 3px 0px 5px. Nie jestem pewien, skąd się bierze, ale inne przeglądarki również mają podobne marginesy. Aby uzyskać idealne dopasowanie, należy pozbyć się tych marginesów:

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

Warto zauważyć, że w przypadku rozwiązania opartego na tabelach marginesy są jakoś zjadane, a wszystko ładnie się wyrównuje.


116
2018-05-20 21:55



Naprawdę fajna odpowiedź - dobrze zbadana i działa. Im bardziej patrzę na CSS, tym bardziej kluczowe wydają się lokalizowane ustawienia marginesów i dopełnienia. Dzięki! - penderi
jakieś fajne css dla tego, więc nie musisz stylizować każdego przycisku i pola - input [type = "radio"], input [type = "checkbox"] {vertical-align: middle; margin: 0px; } - perilandmishap
FYI, px po 0 jest zbędne. Gdy wartość CSS wynosi 0, jednostka nie ma znaczenia, więc margin:0 wystarczyłoby. - jedmao
BTW, nie mogę tego również użyć :( jsfiddle.net/gNVsC - jedmao
Pamiętaj, aby sprawdzić vertical-align innych elementów w tej samej linii (np .: <label>) podczas korzystania z tego rozwiązania. - Diogo Kollross


Następujące działa w Firefoksie i Operze (przepraszam, nie mam obecnie 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;
}

31
2017-10-28 15:02



nie rozumiem, dlaczego twoja odpowiedź nie została zaakceptowana, jest najprostsza z działających dla wszystkich głównych przeglądarek (stan na 18.Apr.2010) - Chris
Zwróć uwagę, że DOCTYPE twojego dokumentu powinno być STRICT, aby zobaczyć efekty VERTICAL-ALIGN.
Myślę, że powodem, dla którego nie przyjęto tej odpowiedzi, jest to, że zgodnie z wybraną odpowiedzią niektóre przeglądarki dodają asymetryczne wartości marginesów, które powstrzymują to podejście przed działaniem. - DaveyDaveDave


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

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


13
2017-12-28 18:07



To jest margin-top: -1px; to dodatkowy sos, który dostaje mój głos. Mam radio w zasięgu, którego używam jako przycisku. umieszczając tylko pionowe-wyrównanie dla stylu radiowego, stawia radio tylko przechodzące przez dno przęsła. umieszczenie pionowego wyrównania w stylu span pozostawia przycisk u góry. Wydaje się, że tylko margines-szczyt nie przynosi efektu. Ale połącz je razem voila - gordon
Czym zajmuje się -1px? - Casebash
-1. To zły pomysł, powodujesz przesunięcie elementu radia, co powoduje, że nie jest wyrównany z innymi otaczającymi elementami. Idź spróbuj z kilkoma wejściami radiowymi jeden po drugim z innymi elementami po bokach. - codenamezero


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

6
2017-07-08 22:34



Dziękuję za odpowiedź, ale obawiam się, że nie rozwiązuje problemu wyrównania. Powinienem być jaś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. Zagraj z marginesem na etykiecie, możesz też dodać to do elementu wejściowego, jeśli chcesz. Tak więc etykieta {marża: 10px 0px 0px 10px; float: left; } wypchnie etykietę w dół o 10 pikseli. - Keith Donegan
Możesz to zrobić, ale jednym z punktów w pierwotnym pytaniu było nie zakładanie niczego na temat rozmiarów przycisków radiowych / pól wyboru. Najprawdopodobniej moje pytanie było zbyt optymistyczne. - Jan Zich


To trochę hack, ale ten CSS wydaje się działać bardzo ładnie we wszystkich przeglądarkach tak samo, jak przy użyciu tabel (oprócz 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 radiem, aby mógł działać. to znaczy

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

4
2018-01-09 13:07



Media bardzo mi pomogły dzięki urządzeniom mobilnym. Dzięki! - Sven van Zoelen


Jeśli twoja etykieta jest długa i przechodzi do wielu rzędów, ustawienie szerokości i wyświetlania: blok inline 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>

3
2017-10-21 23:38





Stwierdziłem, że najlepszą poprawką jest podanie wysokości odpowiadającej etykiecie. Przynajmniej to naprawiło mój problem z niespójnościami w Firefoksie 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>

2
2018-04-19 19:20



Dopasowana wysokość naprawiła moje radia. Nie pola wyboru, ale nie martw się, ponieważ nasz plik site.css jest dość złożony. - SushiGuy


Poniższy kod powinien zadziałać :)

Pozdrowienia,



<style type = "text / css">
input [type = checkbox] {
    margin-bottom: 4px;
    vertical-align: middle;
}

etykieta {
    vertical-align: middle;
}
</ 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 />

2
2018-06-21 08:27





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

label 
{

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

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

padding-bottom:7px; 

}

1
2017-11-29 21:25





Istnieje kilka sposobów na jego wdrożenie:

  1. Dla 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. 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. Dla 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
2018-01-06 07:21