Убрать пробел между флажками

Question

У меня есть форма, которая содержит несколько флажков, выровненных по вертикали в div. Я хочу убрать пробел между каждым флажком. Но я не могу найти никаких решений.

<div style="height:100px;width:25px;float:left;">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

У кого-нибудь есть решение этой проблемы?

Answer 1

Я нашел решение:

  <input type="checkbox" style="margin: 0; padding 0;  height:13px"/>

Для IE вам нужно установить высоту, чтобы убрать пробел между флажками.

Answer 2

После разговора с Полом О'Б, CSS-гуру, это хорошее решение, которое работает в IE 6, 7, 8, FF 3 и Chrome:

<style type="text/css">     
    #aDiv input {
        margin: 0;
        padding: 0;
        display:block;
        height:12px;
        overflow:hidden
    }
</style>

<div id="aDiv" style="width:25px">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

Используется тип документа HTML 4.01 строгий. если вы хотите поставить бок о бок границы для флажков, используйте высоту 13 пикселей.

Селектор атрибутов не будет работать в IE 6, поэтому его здесь нет. Если вам нужно добавить другой элемент ввода, который не является флажком, используйте вместо него класс.

Answer 3

Вероятно, новые строки между тегами <input> интерпретируются как любые другие пробелы, поэтому вы видите пробелы между ними. Я думаю, что правила CSS не имеют к этому никакого отношения.

---

Редактировать: Дальнейшие исследования приводят меня к выводу, что пробелы будут влиять только на горизонтальные промежутки. Что касается вертикального пространства, я считаю, что невозможно гарантировать, что флажки будут слипаться без использования пользовательской графики - веб-браузеры не обязаны делать их идеально квадратными по стандартам, поэтому даже если вы найдете способ заставить их ограничивающие рамки касаться друг друга эффект может быть неудовлетворительным.

Чтобы их ограничивающие рамки были как можно ближе, установите атрибут line-height для элемента div. С оригинальными спрайтами это не выглядит так, как вы хотели в любом браузере, который я тестировал.

Использование нестандартного изображения некоторой высоты и идентичного line-height должно помочь.

---

Другое редактирование: Некоторые люди здесь предложили использовать фиксированную высоту элемента ввода 13px. Помните! Это неправильно . Вы не можете полагаться на факт, что некоторые браузеры имеют встроенный спрайт флажка такой высоты.

Answer 4

Между каждым флажком есть пробел. Единственный способ удалить это - float их:

<style type="text/css">
    .myCheckBoxDiv > input[type="checkbox"]
    {
        float: left;
    }
    .myCheckBoxDiv:after
    {
        clear: both;
        content: "";
        display: block;
    }
</style>

<div class="myCheckBoxDiv">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Answer 5

Это сработало для меня:

<style type="text/css">
body,html,input {padding:0;margin:0;}
</style>
<div style="height:100px;width:25px;float:left;">
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
  <input type="checkbox"/>
</div>

Редактировать: теперь это css:)

Answer 6

Просто установите:

<input type="checkbox" style="margin: 0">

Но это не будет работать в IE.

Я думаю, что разные браузеры отображают HTML-элементы по-разному. Таким образом, становится трудно полностью удержать ситуацию.

Однако я нашел одно решение, но на этот раз нам нужно применить некоторый трюк к элементу тела.

CSS будет выглядеть так:

<style type="text/css">
    input.mycheckbox {
        height: 13px;
        width: 13px
    }

    body {
        font-size: 40%;
    }
</style>

И содержимое тега body:

Надеюсь, это поможет.