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

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

После разговора с Полом O'B, в 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 не имеют к этому никакого отношения.

---

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

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

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

---

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

Answer 4

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

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

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

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

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

CSS-будет выглядеть следующим образом:

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

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

И содержимое внутри тега тела является:

Надеется, что это помогает.

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> 

Edit: Это Valid CSS сейчас :)

Answer 6

Существует белое пространство между каждым флажком. Единственный способ, чтобы удалить его, чтобы 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>