刪除複選框之間的空格

我有一個表格，其中包含多個複選框垂直對齊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>

有沒有人有任何解決這個問題？

來源

2009-06-06 Billy

這*可能*是因爲Web瀏覽器之間的差異相當很難回答的問題 - 我說可能是因爲您提供有關背景資料非常少，說： *你使用什麼瀏覽器？ *您使用的是哪種doctype聲明？ * ...是以怪癖模式渲染頁面嗎？ *您正在努力實現跨瀏覽器兼容性嗎？ – conny 2009-06-06 14:01:30

我找到了解決辦法：

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

對於IE瀏覽器，你需要設置高度刪除複選框之間的空間。

來源

2009-06-06 08:20:26 Billy

談論保羅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>

這是使用的doctype HTML 4.01嚴格。如果您想爲複選框設置並排邊框，請使用13px的高度。

屬性選擇器不能在IE 6上工作，因此它在此處被取出。如果您需要添加不是複選框的其他輸入元素，請改爲使用class。

來源

2009-06-06 08:06:42

這在Internet Explorer中不起作用。 – RichieHindle 2009-06-06 08:07:45

是的，Internet Explorer不起作用。 IE的行爲總是特殊的。 – Billy 2009-06-06 08:14:45

<input>標記之間的換行符可能被解釋爲任何其他空格，這就是爲什麼您會看到它們之間的空格。我認爲CSS規則與它無關。

編輯：進一步的調查使我得出結論空格只會影響水平的差距。對於垂直空間，我認爲不可能確保複選框在不使用自定義圖形的情況下粘在一起 - 網絡瀏覽器不一定要使它們完全符合標準，所以即使您會找到一種方法使它們的邊界框彼此接觸，效果可能不盡如人意。

要使它們的邊界框儘可能接近，請爲div元素設置line-height屬性。有了原始的精靈，它看起來並不像你想在任何瀏覽器中測試過的。

使用自定義圖形的一些高度，並且相同的line-height應該做的伎倆。

另一個編輯：有人在這裏使用的13px輸入元素的固定高度提出。記得！它是錯誤。你不能依靠一個事實，即某些瀏覽器內置了高度的複選框精靈。

來源

2009-06-06 08:31:42 samuil

只需設置：

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

和身體標記中的內容是：

希望這有助於。

來源

2009-06-06 10:12:48

這爲我工作：

<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現在:)

來源

2009-06-06 11:21:02

有每個複選框之間的空白。刪除它的唯一方法是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>

來源

2013-04-24 10:55:04

刪除複選框之間的空格

回答

相關問題