Выравнивание радио / флажков в HTML / CSS

Question

Выравнивание радио / флажков в 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>

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

76

checkbox css html radio-button

автор: Török Gábor

13 ответов

автор: Jan Zich · Accepted Answer · 2015-01-26 13:03:52

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

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

вертикальный-выровняйте: середина: выровняйте вертикальную среднюю точку коробки с базовой линией родительской коробки плюс половину высоты x родитель.

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

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

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

автор: sids · Accepted Answer · 2008-12-28 18:35:43

следующие работы в 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;
}

автор: Dario · Accepted Answer · 2010-10-28 15:02:15

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

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

автор: Keith Donegan · Accepted Answer · 2008-12-28 18:14:39

Я бы не использовал таблицы для этого вообще. 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 */

автор: Justin Vincent · Accepted Answer · 2009-07-08 22:34:08

Это немного взломать, но этот CSS, кажется, очень хорошо работает во всех браузерах так же, как с помощью таблиц (кроме 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; }
}

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

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

автор: Mika · Accepted Answer · 2011-01-09 13:07:07

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

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

автор: Angus · Accepted Answer · 2010-10-21 23:38:46

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

автор: Kin · Accepted Answer · 2011-04-19 19:26:44

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

С уважением,


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

автор: Dunx · Accepted Answer · 2011-06-21 18:19:50

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

label 
{

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

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

padding-bottom:7px; 

}

автор: Ajay Shankar · Accepted Answer · 2011-11-29 21:30:33

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

для 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 Флажок:

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

автор: eilering · Accepted Answer · 2013-01-06 07:21:33

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

код visual basic.

' код для динамической вставки флажка

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}" />
                                <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}" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>

автор: Fight code with code · Accepted Answer · 2013-08-22 10:42:23

@sfjedi

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

.radioA{
   vertical-align: middle;
}

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

автор: Marizabel Camargo · Accepted Answer · 2017-06-22 10:31:43

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

-1

автор: Marizabel Camargo