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


79

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

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

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


Вы должны отредактировать свой вопрос, чтобы прояснить, что вы имеете в виду «в HTML». Я собирался ответить на ваш вопрос о Java ...
Ричард Т.

3
Я надеюсь, что @Richard T имел в виду JavaScript
QueueHammer

1
Я установил JSFIddle, чтобы проиллюстрировать некоторые из предложений: jsfiddle.net/casebash/XNJxT/906
Casebash

«выровнять правильно, что вы имеете в виду? Что считается правильно выровненным?»
Раэдвальд

вы можете выравнивать в процентах: для себя я использую: vertical-align: -15%; на теге input
PhilMaGeo

Ответы:


121

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

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

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

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

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

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

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


4
Действительно хороший ответ - хорошо изучен, и он работает. Чем больше я смотрю на CSS, тем более локализованные настройки полей и отступов кажутся ключевыми. Благодаря!
penderi

по состоянию на 18. апреля 2010 г. это решение не работает в Firefox 3.6.3 для победы
Крис,

5
какой-нибудь хороший CSS для этого, поэтому вам не нужно стилизовать каждую кнопку и поле - input [type = "radio"], input [type = "checkbox"] {vertical-align: middle; маржа: 0px; }
perilandmishap

4
К вашему сведению, пиксель после 0 является избыточным. Когда значение CSS равно 0, единица измерения не имеет значения, поэтому margin:0будет достаточно.
jedmao

2
Не забудьте проверить vertical-alignдругие элементы в той же строке (например:) <label>при использовании этого решения.
Диого Коллросс

31

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

Я не понимаю, почему ваш ответ не был принят, это самый простой рабочий вариант для всех основных браузеров (по состоянию на
Крис

7
Обратите внимание, что DOCTYPE вашего документа должен быть STRICT, чтобы увидеть эффекты VERTICAL-ALIGN.

4
Я думаю, что причина, по которой это не было принято в качестве ответа, заключается в том, что, как гласит выбранный ответ, некоторые браузеры добавляют асимметричные значения полей, которые мешают этому подходу работать.
DaveyDaveDave

13

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

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


Это верхний край: -1px; это дополнительный соус, за который я проголосую. У меня есть радио внутри диапазона, который я использую как кнопку. установка только вертикального выравнивания для стиля радио помещает радио только через нижнюю часть диапазона. размещение вертикального выравнивания в стиле span оставляет кнопку вверху. Кажется, что только верхняя граница не действует. Но сложите их вместе и вуаля
гордон

-1. Это плохая идея, вы вызываете смещение радиоэлемента вверх, из-за чего он не совпадает с другими окружающими элементами. Пойдите попробуйте с несколькими радиовходами один за другим с другими элементами по бокам.
codenamezero

6

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

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

Вы можете сделать это с помощью моего кода. Поиграйте с полем на этикетке, и вы также можете добавить это к элементу ввода, если хотите. Итак, метка {margin: 10px 0px 0px 10px; плыть налево; } подтолкнет метку вниз на 10 пикселей.
Кейт Донеган,

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

4

Это немного похоже на взлом, но этот 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>

Медиа мне очень помогли с мобильными устройствами. Спасибо!
Свен ван Зоелен,

3

Если ваша метка длинная и состоит из нескольких строк, установите ширину и отображение: 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>

2

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

Соответствующая высота зафиксировала мои радиоприемники. Не чекбоксы, но не волнуйтесь, так как наш site.css довольно сложен.
SushiGuy 09

2

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

С Уважением,


<style type = "text / css">
input [type = checkbox] {
    нижнее поле: 4 пикселя;
    вертикальное выравнивание: средний;
}

метка {
    вертикальное выравнивание: средний;
}
</style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Показать ресурсы </label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Показать детекторы </label> <br />

1

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

label 
{

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

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

padding-bottom:7px; 

}

1

Реализовать это можно несколькими способами:

  1. Для стандартного флажка 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. Для DevExpress CheckBox:

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

    <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
       <asp:ListItem>Yes</asp:ListItem>
       <asp:ListItem>No</asp:ListItem>
    </asp:RadioButtonList>
    
  4. Для обязательных валидаторов полей:

    <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

Ниже я динамически установлю флажок. Стиль включен для выравнивания флажка и, что наиболее важно, для обеспечения прямого переноса слов. здесь самое главное display: 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>



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.