как совместить флажки и их метки последовательно в кросс-браузерах

<p>это одна из мелких проблем css, которая постоянно мучает меня. как люди вокруг переполнения стека вертикально выравнивают<strong> <em><code>checkboxes</code></em> </strong>и их<strong> <em><code>labels</code></em> </strong>последовательно<strong> кросс-браузер </strong>? всякий раз, когда я корректно выравниваю их в safari (обычно с помощью <code>vertical-align: baseline</code> на <code>input</code>), они полностью отключаются в firefox и ie. исправьте это в firefox, и safari и ie неизбежно испортятся. я трачу время на это каждый раз, когда кодирую форму.</p><p>вот стандартный код, с которым я работаю:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div> <label><input type="checkbox" /> label text</label> </div> </form></code></pre> </div> </div> </p><p>я обычно использую сброс эрика мейера, поэтому элементы формы относительно чисты от переопределений. ждем любых советов или хитростей, которые вы можете предложить!</p>

<p>после более чем часа настройки, тестирования и разметки разных стилей, я думаю, у меня может быть достойное решение. требования для этого конкретного проекта были:</p><ol> <li>входы должны быть на своей линии.</li> <li>входные данные флажков должны выравниваться по вертикали с текстом метки одинаково (если не одинаково) во всех браузерах.</li> <li>если текст метки переносится, он должен быть с отступом (поэтому не нужно вставлять под флажок).</li> </ol><p>прежде чем я приведу какое-либо объяснение, я просто дам вам код:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>label { display: block; padding-left: 15px; text-indent: -15px; } input { width: 13px; height: 13px; padding: 0; margin:0; vertical-align: bottom; position: relative; top: -1px; *overflow: hidden; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div> <label><input type="checkbox" /> label text</label> </div> </form></code></pre> </div> </div> </p><p>вот рабочий пример в <a href="http://jsfiddle.net/t8egn/6/">jsfiddle</a> .</p><p>в этом коде предполагается, что вы используете сброс, такой как эрик майер, который не переопределяет поля ввода и отступы формы (следовательно, вводит сброс полей и отступов в css ввода). очевидно, что в реальной среде вы, вероятно, будете вкладывать/переопределять материал для поддержки других элементов ввода, но я хотел, чтобы все было просто.</p><p>что следует отметить:</p><ul> <li>объявление <code>*overflow</code> является встроенным хаком ie (взломать свойство star). оба ie 6 и 7 заметят это, но safari и firefox будут правильно игнорировать это. я думаю, что это мог бы быть действительный css, но вам все еще лучше с условными комментариями; просто использовал это для простоты.</li> <li>насколько я могу судить, единственное утверждение <code>vertical-align</code>, которое было одинаковым для всех браузеров, было <code>vertical-align: bottom</code>. установка этого и последующее относительное позиционирование вверх в safari, firefox и ie ведут себя почти одинаково, с разницей в один или два пикселя.</li> <li>основная проблема в работе с выравниванием заключается в том, что ie удерживает загадочное пространство вокруг элементов ввода. это не отступы или отступы, и это чертовски настойчиво. установка ширины и высоты для флажка, а затем <code>overflow: hidden</code> по какой-то причине отсекает дополнительное пространство и позволяет позиционированию ie действовать очень похоже на safari и firefox.</li> <li>в зависимости от размера текста, вам, без сомнения, потребуется настроить относительное положение, ширину, высоту и т.д., чтобы все выглядело правильно.</li> </ul><p>надеюсь, это поможет кому-то еще! я не пробовал эту конкретную технику на каких-либо проектах, кроме тех, над которыми я работал этим утром, поэтому определенно подготовьтесь, если найдете что-то, что работает более последовательно. </p>

<p>иногда для вертикального выравнивания требуются два встроенных элемента (span, label, input и т.д.) рядом друг с другом для правильной работы. следующие флажки правильно отцентрированы по вертикали в ie, safari, ff и chrome, даже если размер текста очень маленький или большой.</p><p>все они плавают рядом друг с другом в одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.</p><p>недостатком являются дополнительные бессмысленные теги span. </p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkboxes label { display: block; float: left; padding-right: 10px; white-space: nowrap; } .checkboxes input { vertical-align: middle; } .checkboxes label span { vertical-align: middle; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div class="checkboxes"> <label for="x"><input type="checkbox" id="x" /> <span>label text x</span></label> <label for="y"><input type="checkbox" id="y" /> <span>label text y</span></label> <label for="z"><input type="checkbox" id="z" /> <span>label text z</span></label> </div> </form></code></pre> </div> </div> </p><p>теперь, если бы у вас был очень длинный текст метки, который<em> нужно </em>обернуть без переноса под флажком, вы бы использовали отступ и отрицательный текстовый отступ для элементов метки:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.checkboxes label { display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px; } .checkboxes input { vertical-align: middle; } .checkboxes label span { vertical-align: middle; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div class="checkboxes"> <label for="x"><input type="checkbox" id="x" /> <span>label text x</span></label> <label for="y"><input type="checkbox" id="y" /> <span>label text y</span></label> <label for="z"><input type="checkbox" id="z" /> <span>label text z</span></label> </div> </form></code></pre> </div> </div> </p>

<p>отработка <a href="https://stackoverflow.com/a/306593/1079573">решение one crayon</a> , у меня есть кое-что, что работает для меня и проще:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.font2 {font-family:arial; font-size:32px} /* sample font */ input[type=checkbox], input[type=radio] { vertical-align: middle; position: relative; bottom: 1px; } input[type=radio] { bottom: 2px; } </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><label><input type="checkbox" /> label text</label> <p class="font2"> <label><input type="checkbox"/> label text</label> </p></code></pre> </div> </div> </p><p>отрисовывает пиксель за пикселем то же самое в safari (базовый уровень которого я доверяю), и firefox и ie7 проверяются как хорошие. он также работает для шрифтов различных размеров, больших и маленьких. теперь для исправления базовой линии ie на выборках и входах ...</p><hr><p><strong>обновление:</strong> (стороннее редактирование)</p><p>правильная позиция <code>bottom</code> зависит от семейства шрифтов и размера шрифта! я обнаружил, что использование <strong><code>bottom: .08em;</code></strong> для флажка и радиоэлементов является хорошим общим значением. я тестировал его в chrome/firefox/ie11 в windows со шрифтами arial и calibri, используя несколько маленьких/средних/больших шрифтов.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.font2, .font2 input {font-family:arial; font-size:32px} /* sample font */ input[type=checkbox], input[type=radio] { vertical-align: middle; position: relative; bottom: .08em; /* this is a better value for different fonts! */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><label><input type="checkbox" /> label text</label> <p class="font2"> <label><input type="checkbox"/> label text</label> </p></code></pre> </div> </div> </p>

<p>одна простая вещь, которая, кажется, работает хорошо, состоит в том, чтобы применить корректировку вертикального положения флажка с вертикальным выравниванием. это будет по-разному в разных браузерах, но решение несложное.</p><pre class="lang-css prettyprint-override"><code>input { vertical-align: -2px; } </code></pre><p> <a href="http://www.cssdesignpatterns.com/chapter%2012%20-%20aligning%20content/vertical-offset%20content/example.html"><strong>ссылка</strong></a> </p>

<p>попробуйте <code>vertical-align: middle</code></p><p>также ваш код выглядит так: <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div> <input id="blah" type="checkbox"><label for="blah">label text</label> </div> </form></code></pre> </div> </div> </p>

<p>попробуйте мое решение, я попробовал его в ie 6, ff2 и chrome, и он рендерил пиксель за пикселем во всех трех браузерах.</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>* { padding: 0px; margin: 0px; } #wb { width: 15px; height: 15px; float: left; } #somelabel { float: left; padding-left: 3px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div> <input id="wb" type="checkbox" /> <label for="wb" id="somelabel">web browser</label> </div></code></pre> </div> </div> </p>

<p>единственное идеально работающее решение для меня:</p><pre><code>input[type=checkbox], input[type=radio] { vertical-align: -2px; margin: 0; padding: 0; } </code></pre><p>протестировано сегодня в chrome, firefox, opera, ie 7 и 8. пример: <strong> <a href="http://jsfiddle.net/6lf9eohs/6/">fiddle</a> </strong></p>

<p>я обычно использую высоту строки, чтобы отрегулировать вертикальное положение моего статического текста:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>label { line-height: 18px; } input { width: 13px; height: 18px; font-size: 12px; line-height: 12px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <div> <label><input type="checkbox" /> label text</label> </div> </form></code></pre> </div> </div> </p><p>надеюсь, это поможет.</p>

<p>я не полностью проверил свое решение, но, похоже, оно отлично работает.</p><p>мой html просто:</p><pre class="lang-html prettyprint-override"><code><label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label> </code></pre><p>затем я установил все флажки в <code>24px</code> для высоты и ширины. чтобы выровнять текст, я делаю метку <code>line-height</code> также <code>24px</code> и назначаю <code>vertical-align: top;</code> следующим образом:</p><p><strong> правка: </strong>после тестирования ie я добавил <code>vertical-align: bottom;</code> к входу и изменил css метки. возможно, вам понадобится условный ie регистр css для сортировки отступов - но текст и поле встроены.</p><pre class="lang-css prettyprint-override"><code>input[type="checkbox"] { width: 24px; height: 24px; vertical-align: bottom; } label.checkbox { vertical-align: top; line-height: 24px; margin: 2px 0; display: block; height: 24px; } </code></pre><p>если кто-то обнаружит, что это не работает, пожалуйста, дайте мне знать. вот оно в действии (в chrome и ie - извинения за то, что на сетчатке были сделаны скриншоты и используются параллели для ie)</p><p><img src="https://i.stack.imgur.com/arazm.png" alt="screenshot of checkboxes: chrome"> <img src="https://i.stack.imgur.com/shbmt.png" alt="screenshot of checkboxes: ie"></p>

<p>я думаю, что это самый простой способ</p><pre class="lang-css prettyprint-override"><code>input { position: relative; top: 1px; } </code></pre><p><strong> <a href="http://jsfiddle.net/t8egn/3677/">fiddle</a> </strong></p>

<p>это хорошо работает для меня:</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>fieldset { text-align:left; border:none } fieldset ol, fieldset ul { padding:0; list-style:none } fieldset li { padding-bottom:1.5em; float:none; clear:left } label { float:left; width:7em; margin-right:1em } fieldset.checkboxes li { clear:both; padding:.75em } fieldset.checkboxes label { margin:0 0 0 1em; width:20em } fieldset.checkboxes input { float:left }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <fieldset class="checkboxes"> <ul> <li> <input type="checkbox" name="happy" value="yep" id="happy" /> <label for="happy">happy?</label> </li> <li> <input type="checkbox" name="hungry" value="yep" id="hungry" /> <label for="hungry">hungry?</label> </li> </ul> </fieldset> </form></code></pre> </div> </div> </p>

<p>теперь, когда flexbox поддерживается во всех современных браузерах, что-то вроде этого кажется мне более простым подходом.</p><pre><code><style> label { display: flex; align-items: center; } input[type=radio], input[type=checkbox]{ flex: none; } </style> <form> <div> <label><input type="checkbox" /> label text</label> </div> </form> </code></pre><p><br> <strong> вот полная демонстрационная версия с префиксом: </strong></p><p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } input[type=radio], input[type=checkbox] { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; margin-right: 10px; } /* demo only (to show alignment) */ form { max-width: 200px }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><form> <label> <input type="radio" checked> i am an aligned radio and label </label> <label> <input type="checkbox" checked> i am an aligned checkbox and label </label> </form></code></pre> </div> </div> </p>

<p>мне не нравится относительное позиционирование, потому что оно делает элемент визуализированным над всем остальным на своем уровне (он может попасть поверх чего-либо, если у вас сложный макет).</p><p>я обнаружил, что <code>vertical-align: sub</code> делает чекбоксы достаточно хорошо выровненными в chrome, firefox и opera. не могу проверить safari, так как у меня нет macos и ie10 немного отключен, но я нашел, что это достаточно хорошее решение для меня.</p><p>другое решение может заключаться в том, чтобы попытаться создать определенный css для каждого браузера и настроить его с помощью некоторого вертикального выравнивания в%/пикселях/em: <a href="http://css-tricks.com/snippets/css/browser-specific-hacks/">http://css-tricks.com/snippets/css/browser -специфичные хаки/</a> </p>

<p>у меня никогда не было проблем с этим:</p><pre><code><form> <div> <input type="checkbox" id="cb" /> <label for="cb">label text</label> </div> </form> </code></pre>

<p>выбранный ответ с более чем 400 ответами не работал для меня в chrome 28 osx, возможно, потому, что он не был протестирован в osx или что он работал во всем, что было в 2008 году, когда на этот вопрос был дан ответ.</p><p>времена изменились, и теперь стали возможны новые решения css3. мое решение использует <a href="http://reference.sitepoint.com/css/pseudoelements">псевдоэлементы</a> для создания <em>пользовательского флажка</em>. таким образом, условия (плюсы или минусы, как ни крути) таковы:</p><ul> <li>работает только в современных браузерах (ff3.6 +, ie9 +, chrome, safari)</li> <li>полагается на специально разработанный флажок, который будет отображаться одинаково в каждом браузере/ос. здесь я только что выбрал несколько простых цветов, но вы всегда можете добавить линейные градиенты и тому подобное, чтобы придать ему больше удовольствия.</li> <li>приспособлен к определенному шрифту/размеру шрифта, который, если изменить, вы просто изменили бы расположение и размер флажка, чтобы он выглядел вертикально выровненным. при правильной настройке конечный результат должен быть практически одинаковым во всех браузерах/операционных системах.</li> <li>нет свойств вертикального выравнивания, нет поплавков</li> <li>нужно использовать предоставленную разметку в моем примере, она не будет работать, если структурирована как вопрос, однако, макет будет выглядеть в основном одинаково. если вы хотите переместить вещи, вам также нужно будет переместить связанный css</li> </ul><p>ваш html:</p><pre><code><form> <div class="checkbox"> <input id="check\_me" type=checkbox /> <label for="check\_me">label for checkbox</label> </div> </form> </code></pre><p>ваш css:</p><pre class="lang-css prettyprint-override"><code>div.checkbox { position: relative; font-family: arial; font-size: 13px; } label { position: relative; padding-left: 16px; } label::before { content :""; display: inline-block; width: 10px; height: 10px; background-color: white; border: solid 1px #9c9c9c; position: absolute; top: 1px; left: 0px; } label::after { content:""; width: 8px; height: 8px; background-color: #666666; position: absolute; left: 2px; top: 3px; display: none; } input[type=checkbox] { visibility: hidden; position: absolute; } input[type=checkbox]:checked + label::after { display: block; } input[type=checkbox]:active + label::before { background-color: #dddddd; } </code></pre><p>это решение <em>скрывает флажок</em>, а также добавляет и накладывает стили псевдоэлементов на метку, чтобы создать видимый флажок. поскольку метка привязана к скрытому флажку, поле ввода все равно будет обновлено, а значение будет отправлено вместе с формой.</p><p>jsfiddle: <a href="http://jsfiddle.net/sgxyy/6/">http://jsfiddle.net/sgxyy/6/</a> </p><p>и если вам интересно, вот мое мнение о переключателях: <a href="http://jsfiddle.net/dtkrv/2/">http://jsfiddle.net/dtkrv/2/</a> </p><p>надеюсь, кто-то найдет это полезным!</p>

<p>если вы используете<strong> asp.net web forms </strong>вам не нужно беспокоиться о div и других элементах или фиксированных размерах. мы можем выровнять текст <code><asp:checkboxlist></code>, установив <code>float:left</code> в тип ввода checkboxlist в css.</p><p>пожалуйста, проверьте следующий пример кода:</p><pre class="lang-css prettyprint-override"><code>.checkboxlist { font-size: 14px; color: #333333; } .checkboxlist input { float: left; clear: both; } </code></pre><p><strong> .aspx код: </strong></p><pre><code><asp:checkboxlist runat="server" id="c1" repeatcolumns="2" cssclass="checkboxlist"> </asp:checkboxlist> </code></pre>

<pre><code><form> <div> <label style="display: inline-block"> <input style="vertical-align: middle" type="checkbox" /> <span style="vertical-align: middle">label text</span> </label> </div> </form> </code></pre><p>хитрость заключается в том, чтобы использовать вертикальное выравнивание только в ячейках таблицы или встроенном блоке, если используется тег label.</p>

<p>жестко закодируйте высоту и ширину флажка, удалите его отступы и сделайте его высоту плюс вертикальные поля равными высоте строки метки. если текст метки встроен, установите флажок. firefox, chrome и ie7 + одинаково отображают следующий пример: <a href="http://www.kornea.com/css-checkbox-align">http://www.kornea.com/css-checkbox-align</a> </p>

<p>если вы используете twitter bootstrap, вы можете просто использовать класс <code>checkbox</code> в <code><label></code>:</p><pre><code><label class="checkbox"> <input type="checkbox"> remember me </label> </code></pre>

<p>с флажком типа ввода, обернутым внутри метки и смещенным влево, вот так:</p><pre class="lang-html prettyprint-override"><code><label for="id" class="checkbox"> <input type="checkbox" id="id"> <span>the label</span> </label> </code></pre><p>это сработало для меня:</p><pre class="lang-css prettyprint-override"><code>label.checkbox { display: block; } .checkbox input { float: left; height: 18px; vertical-align: middle; } .checkbox span { float: left; line-height: 18px; margin: 0 0 0 20px; } </code></pre><p>убедитесь, что высота равна высоте строки (уровень блока).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=checkbox] { vertical-align: middle; } </code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input id="testcheckbox" name="testcheckbox" type="checkbox"> <label for="testcheckbox">i should align</label></code></pre> </div> </div> </p>

<p>используйте просто <code>vertical-align: sub</code>, так как <a href="https://stackoverflow.com/a/26781309/1763602">покришка</a> уже предложена.</p><p> <a href="https://jsfiddle.net/3e3gl73w/">fiddle</a> </p><p>html-код:</p><pre><code><div class="checkboxes"> <label for="check1">test</label> <input id="check1" type="checkbox"></input> </div> </code></pre><p>код css:</p><pre><code>.checkboxes input { vertical-align: sub; } </code></pre>

<p>я обычно оставляю флажок без метки, а затем делаю его «метку» отдельным элементом. это больно, но между браузерами так много различий в том, как отображаются флажки и их метки (как вы заметили), что это единственный способ приблизиться к контролю того, как все выглядит.</p><p>я также заканчиваю тем, что делал это в разработке winforms, по той же причине. я думаю, что основная проблема с элементом управления checkbox заключается в том, что это действительно два разных элемента управления: поле и метка. используя флажок, вы оставляете на усмотрение разработчиков элемента управления решать, как эти два элемента отображаются рядом друг с другом (и они всегда ошибаются, где неправильно = не то, что вы хотите).</p><p>я действительно надеюсь, что у кого-то есть лучший ответ на ваш вопрос.</p>

<p>так что я знаю, что на это уже много раз отвечали, но я чувствую, что у меня есть более элегантное решение, чем те, которые уже были предоставлены. и не только 1 элегантное решение, но и 2 отдельных решения, чтобы пощекотать ваше воображение. с учетом всего сказанного, все, что вам нужно знать и видеть, содержится в 2 js fiddle's с комментариями.</p><hr><p>решение № 1 опирается на собственный «флажок» данного браузера, хотя и с изюминкой ... он содержится в элементе div, который легче позиционировать в кросс-браузерном режиме, с переполнением: скрыт, чтобы отбросить избыток растянутого флажка на 1 пиксель (это так, что вы не можете видеть уродливые границы ff)</p><p>простой html: <strong>(перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода должен удовлетворить стекопоток)</strong> <a href="http://jsfiddle.net/kqghj/">http://jsfiddle.net/kqghj/</a> </p><pre><code><label><div class="checkbox"><input type="checkbox" /></div> label text</label> </code></pre><hr><p>решение № 2 использует «переключатель флажков», чтобы переключать состояние css div, который был правильно позиционирован в браузере, и настраивается с помощью простого sprite для состояний флажков, не отмеченных и отмеченных. все, что нужно, это отрегулировать положение фона с помощью указанного флажка toggle hack. это, на мой взгляд, более элегантное решение, поскольку у вас больше контроля над флажками и радиоприемниками, и вы можете гарантировать, что они выглядят одинаково в браузере.</p><p>простой html: <strong>(перейдите по ссылке, чтобы просмотреть css с комментариями, блок кода должен удовлетворить stackoverflow)</strong> <a href="http://jsfiddle.net/sx5m2/">http://jsfiddle.net/sx5m2/</a> </p><pre><code><label><input type="checkbox" /><div class="checkbox"></div>label text</label> </code></pre><hr><p>если кто-то не согласен с этими методами, пожалуйста, оставьте мне комментарий, я хотел бы услышать некоторые отзывы о том, почему другие не сталкивались с этими решениями, или, если они есть, почему я не вижу здесь ответов относительно них? если кто-то увидит, что один из этих методов потерпит неудачу, было бы неплохо увидеть это, но они были протестированы в последних браузерах и полагаются на методы html/css, которые являются довольно старыми и универсальными, насколько я видел.</p>

<p>css:</p><pre class="lang-css prettyprint-override"><code>.threecol .listitem { width:13.9em; padding:.2em; margin:.2em; float:left; border-bottom:solid #f3f3f3 1px; } .threecol input { float:left; width:auto; margin:.2em .2em .2em 0; border:none; background:none; } .threecol label { float:left; margin:.1em 0 .1em 0; } </code></pre><p>html:</p><pre class="lang-html prettyprint-override"><code><div class="threecol"> <div class="listitem"> <input type="checkbox" name="name" id="id" value="checkbox1" /> <label for="name">this is your checkbox</label> </div> </div> </code></pre><p>приведенный выше код поместит элементы списка в три протокола и просто изменит ширину в соответствии с вашими требованиями.</p>

<p><strong> следующее обеспечивает идеальную согласованность пикселей в браузерах, даже в ie9: </strong></p><p>подход довольно разумный, до такой степени очевидный:</p><ol> <li>создайте вход и метку.</li> <li>отобразите их как блок, чтобы вы могли плавать их, как вам нравится.</li> <li>установите высоту и высоту строки в одно и то же значение, чтобы обеспечить их центрирование и выравнивание по вертикали.</li> <li>для<strong> <em>em</em> </strong>измерения, чтобы вычислить высоту элементов, браузер должен знать высоту шрифта для этих элементов, и он не должен быть сам установлен в измерениях em.</li> </ol><p><strong> это приводит к общему применимому общему правилу: </strong></p><pre><code>input, label {display:block;float:left;height:1em;line-height:1em;} </code></pre><p>с изменяемым размером шрифта для формы, набора полей или элемента.</p><pre><code>#myform input, #myform label {font-size:20px;} </code></pre><p><strong> <em>протестировано в последних версиях chrome, safari и firefox на mac, windows, iphone и android. и ie9.</em> </strong></p><p>этот метод, вероятно, применим ко всем типам ввода, которые не превышают одну строку текста. примените правило типа, чтобы удовлетворить.</p>

<p>yay спасибо! это тоже сводило меня с ума навсегда. </p><p>в моем конкретном случае это сработало для меня:</p><pre class="lang-css prettyprint-override"><code>input { width: 13px; height: 13px; padding: 0; margin:0; vertical-align: top; position: relative; *top: 1px; *overflow: hidden; } label { display: block; padding: 0; padding-left: 15px; text-indent: -15px; border: 0px solid; margin-left: 5px; vertical-align: top; } </code></pre><p>я использую reset.css, который может объяснить некоторые различия, но мне кажется, что это хорошо работает.</p>

<p><code>position: relative;</code> имеет некоторые проблемы в ie с z-index и анимациями, такими как slideqp/slidedown jquery.</p><p>css:</p><pre class="lang-css prettyprint-override"><code>input[type=checkbox], input[type=radio] { vertical-align: baseline; position: relative; top: 3px; margin: 0 3px 0 0; padding: 0px; } input.ie7[type=checkbox], input.ie7[type=radio] { vertical-align: middle; position: static; margin-bottom: -2px; height: 13px; width: 13px; } </code></pre><p>jquery:</p><pre class="lang-js prettyprint-override"><code>$(document).ready(function () { if ($.browser.msie && $.browser.version <= 7) { $('input[type=checkbox]').addclass('ie7'); $('input[type=radio]').addclass('ie7'); } }); </code></pre><p>возможно, стиль нуждается в настройке в зависимости от размера шрифта, используемого в <code><label></code></p><p>ps:<br> я использую <a href="http://ie7-js.googlecode.com/">ie7js</a> , чтобы заставить css работать в ie6. </p>

<pre class="lang-html prettyprint-override"><code><fieldset class="checks"> <legend>checks for whatevers</legend> <input type="" id="x" /> <label for="x">label</label> <input type="" id="y" /> <label for="y">label</label> <input type="" id="z" /> <label for="z">label</label> </fieldset> </code></pre><p>вы все равно должны обернуть элементы управления формой, сгруппированные в их собственные наборы полей, здесь он воспроизводит обертку. установить ввод/метку для отображения: блок, плавающий ввод влево, плавающий метка вправо, установить ширину, контролировать интервалы с левыми/правыми полями, соответственно выровнять текст метки. </p><p>так</p><pre class="lang-css prettyprint-override"><code>fieldset.checks { width:200px } .checks input, .checks label { display:block; } .checks input { float:right; width:10px; margin-right:5px } .checks label { float:left; width:180px; margin-left:5px; text-align:left; text-indent:5px } </code></pre><p>вам, вероятно, нужно установить границы, контур и высоту линии на обоих, а также для кросс-браузерных/мультимедийных решений. </p>

<p>может быть, некоторые люди делают ту же ошибку, что и я? что было ... я установил ширину для полей ввода, потому что они были в основном типа «текст», но потом забыл переопределить эту ширину для флажков - поэтому мой флажок пытался занять много лишней ширины и поэтому было трудно выровнять ярлык рядом с ним.</p><pre class="lang-css prettyprint-override"><code>.checkboxlabel { width: 100%; vertical-align: middle; } .checkbox { width: 20px !important; } </code></pre><pre class="lang-html prettyprint-override"><code><label for='acheckbox' class='checkboxlabel'> <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>contact me</label> </code></pre><p>предоставляет интерактивные ярлыки и правильное выравнивание еще в ie6 (с использованием селектора классов) и в поздних версиях firefox, safari и chrome</p>

<p>это не лучший способ решить проблему</p><pre><code>vertical-align: middle </code></pre><hr><p>добавление <code>style="position:relative;top:2px;"</code> в поле ввода переместит его вниз <code>2px</code>. таким образом, в зависимости от размера шрифта, вы можете перемещать его.</p>

<p><strong>простое решение:</strong></p><pre><code><label style="display:block"> <input style="vertical-align:middle" type="checkbox"> <span style="vertical-align:middle">label</span> </label> </code></pre><p><strong>протестировано в chrome, firefox, <a href="https://www.browserling.com/browse/win/vista/ie/9/http%3a%2f%2fwww.sharhon.com%2ffiles%2fcheckbox-align.html">ie9</a> +, safari, ios 9+</strong></p>

<p>я нашел единственный способ выстроить их в ряд, используя абсолютную позицию для ввода. игра с верхней переменной input дала желаемый результат.</p><pre><code>div { clear: both; float: none; position: relative; } input { left: 5px; position: absolute; top: 3px; } label { display: block; margin-left: 20px; } </code></pre>