Wyrównanie radia / pola wyboru w HTML / CSS

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.

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.

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

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

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

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>

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>

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>

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

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; 

}

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

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>

@sfjedi

Utworzyłem klasę i przypisałem do niej wartości css.

.radioA{
   vertical-align: middle;
}

Działa i możesz to sprawdzić w poniższym linku. http://jsfiddle.net/gNVsC/ Mam nadzieję, że to było przydatne.