Настройка радио/флажка в HTML/CSS

Каков самый чистый способ правильной настройки переключателей/флажков с текстом? Единственное надежное решение, которое я использовал до сих пор, основано на таблицах:

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

Это могут быть недовольны некоторыми. Я просто провел некоторое время (снова), расследуя решение без таблиц, но потерпел неудачу. Ive пробовал различные комбинации поплавков, абсолютное/относительное позиционирование и аналогичные подходы. Мало того, что они в основном полагались молча на предполагаемую высоту переключателей/флажков, но они также вели себя по-разному в разных браузерах. В идеале я хотел бы найти решение, которое не предполагает ничего о размерах или специальных пристрастиях к браузеру. Im отлично с использованием таблиц, но мне интересно, где есть другое решение.

ОТВЕТЫ

Ответ 1

Я думаю, что я, наконец, решил проблему. Обычно рекомендуется использовать вертикальное выравнивание: middle:

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

Проблема, однако, состоит в том, что она все еще вызывает видимые смещения, хотя теоретически она должна работать. Спецификация CSS2 говорит, что:

vertical-align: middle: Совместите вертикальную середину поля с базовой линией родительского поля плюс половину x-высоты родительского элемента.

Таким образом, он должен находиться в идеальном центре (высота x - высота символа x). Однако проблема, по-видимому, вызвана тем фактом, что браузеры обычно добавляют некоторые случайные неравномерные поля к переключателям и флажкам. Можно проверить, например, в Firefox с использованием Firebug, что по умолчанию флажок в Firefox - 3px 3px 0px 5px. Я не уверен, откуда она взялась, но другие браузеры, похоже, имеют аналогичные поля. Чтобы получить идеальное выравнивание, нужно избавиться от этих полей:

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

По-прежнему интересно отметить, что в решении, основанном на таблице, поля как-то съедаются, и все выравнивается хорошо.

Ответ 2

В Firefox и Opera работает следующее (извините, у меня нет доступа к другим браузерам в данный момент):

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

CSS:

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

Ответ 3

Я нашел лучший и самый простой способ сделать это, потому что вам не нужно добавлять ярлыки, divs или что бы то ни было.

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

Ответ 4

Я бы не использовал таблицы для этого вообще. CSS может легко сделать это.

Я бы сделал что-то вроде этого:

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

Примечание. Я использовал класс clearfix: 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 */

Ответ 5

Это немного взломать, но этот CSS, похоже, очень хорошо работает во всех браузерах так же, как с использованием таблиц (кроме хрома).

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

Убедитесь, что вы используете ярлыки с радиоприемниками для его работы. то есть.

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

Ответ 6

Если ваш ярлык длинный и идет по нескольким строкам, установите ширину и отображение: встроенный блок поможет.

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

Ответ 7

Я нашел, что лучшим решением для этого было дать вводу высоты, соответствующей метке. По крайней мере, это устранило мою проблему с несогласованностью в Firefox и 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>

Ответ 8

Следующий код должен работать:)

Привет,

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

label {
    vertical-align: middle;
}
</style>


<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />

Ответ 9

Это простое решение, которое решило проблему для меня:

label 
{

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

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

padding-bottom:7px; 

}

Ответ 10

Существует несколько способов его реализации:

  • Для стандартного CheckBox для 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>

  • Для DevExpress CheckBox:

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

  • Для RadioButtonList:

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
   <asp:ListItem>Yes</asp:ListItem>
   <asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>

  • Для обязательных полевых валидаторов:

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

Ответ 11

Ниже я поставлю флажок динамически. Стиль включен, чтобы выровнять флажок и, самое главное, убедиться, что перенос слов прямо. самое главное здесь - отображение: table-cell; для выравнивания

Визуальный базовый код.

', чтобы динамически вставить флажок

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

'установите флажок

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

'установите флажок

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

'стиль для флажка

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

и вывод 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>

Ответ 12

@sfjedi

Я создал класс и присвоил ему значения css.

.radioA{
   vertical-align: middle;
}

Он работает, и вы можете проверить его в приведенной ниже ссылке. http://jsfiddle.net/gNVsC/ Надеюсь, это было полезно.

Ответ 13

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1;
}