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专家Paul O'B交谈之后，这是一个适用于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严格的doctype。如果你想要复选框的并排边框，请使用13px的高度。

属性选择器不能在IE 6上运行，所以它在这里被取出。如果您需要添加不是复选框的其他输入元素，请改用class。

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

刚设置：

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

但它在IE中不起作用。

我认为不同的浏览器会以不同的方式呈现html元素。因此，很难完全掌握这种情况。

但是，我找到了一个解决方案，但这次我们需要对body元素应用一些技巧。

CSS将是这样的：

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

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

body标签内的内容是：

希望这有帮助。

Answer 6

这对我有用：

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

删除复选框之间的空格

6 个答案: