間距值

我怎麼會去有關編輯HTML/CSS創建每個複選框/值對之間的間距？現在每個複選框和每個值均勻分隔。我希望value1接近checkbox1，但checkbox2與value1有一定的距離。

代碼在這裏：在這種方式

.checkboxes { 
    text-align:center; 
} 

.checkboxes input{ 
    margin: 0 20px 0; 
} 

<div class="checkboxes"> 
    <span> 
    <input type="checkbox" name="One" value="One"> One 
    <input type="checkbox" name="Two" value="Two"> Two 
    <input type="checkbox" name="Three" value="Three"> Three 
    <input type="checkbox" name="Four" value="Four"> Four 
    </span> 
</div>

來源

2017-07-07 Matthew Snell

看看https://codepen.io/CreativeJuiz/pen/BiHzp - 你不能設計元素的屬性。 –

使用此代碼

.checkboxes { 
 
     text-align:center; 
 
    } 
 

 
    .checkboxes input{ 
 
     margin: 0px 0px 0px 0px; 
 
    } 
 

 
    .checkboxes label{ 
 
     margin: 0px 20px 0px 3px; 
 
    }

<html> 
 
<head> 
 
    </head> 
 
<body> 
 

 
    <div class="checkboxes"> 
 
    <span> 
 
    <input type="checkbox" name="Mow" value="Mow"> <label>One</label> 
 
    <input type="checkbox" name="Weedeat" value="Weedeat"> <label>Two</label> 
 
    <input type="checkbox" name="Edge" value="Edge"> <label>Three</label> 
 
    <input type="checkbox" name="Other" value="Other"> <label>Four</label> 
 
    </span> 
 
    </div> 
 

 
</body> 
 
</html>

來源

2017-07-07 04:21:26

使用CSS margin: top left bottom right;

.checkboxes input{ 
    margin: 0 5px 0 20px; 
}

.checkboxes { 
 
    text-align:center; 
 
} 
 

 
.checkboxes input{ 
 
    margin: 0 5px 0 20px; 
 
}

<div class="checkboxes"> 
 
    <span> 
 
    <input type="checkbox" name="One" value="One"> One 
 
    <input type="checkbox" name="Two" value="Two"> Two 
 
    <input type="checkbox" name="Three" value="Three"> Three 
 
    <input type="checkbox" name="Four" value="Four"> Four 
 
    </span> 
 
</div>

來源

2017-07-07 04:18:38 lkdhruw

您可以添加一個ID來複選框之一，寫一個風格單獨地， JSFiddle Code Here

#chk1 { 
     margin :0px !important; 
    } 

    <div class="checkboxes"> 
    <span> 
    <input type="checkbox" id="chk1" name="Mow" value="Mow"> One 
    <input type="checkbox" name="Weedeat" value="Weedeat"> Two 
    <input type="checkbox" name="Edge" value="Edge"> Three 
    <input type="checkbox" name="Other" value="Other"> Four 
    </span> 
    </div>

來源

2017-07-07 04:18:52

你需要減少右邊緣一點，可能需要增加左邊距

.checkboxes input{ 
    margin: 0 5px 0 30px; 
}

.checkboxes { 
 
    text-align:center; 
 
} 
 

 
.checkboxes input{ 
 
    margin: 0 5px 0 30px; 
 
}

<div class="checkboxes"> 
 
     <span> 
 
     <input type="checkbox" name="Mow" value="Mow"> One 
 
     <input type="checkbox" name="Weedeat" value="Weedeat"> Two 
 
     <input type="checkbox" name="Edge" value="Edge"> Three 
 
     <input type="checkbox" name="Other" value="Other"> Four 
 
     </span> 
 
     </div>

來源

2017-07-07 04:19:31 Rahul

您目前正在申報爲輸入的保證金三個值。

聲明四個，因此您可以分別指定頂部，左側，底部和右側。

.checkboxes { 
 
    text-align: center; 
 
} 
 

 
.checkboxes input{ 
 
    margin: 0 0 0 20px; 
 
}

<div class="checkboxes"> 
 
    <span> 
 
    <input type="checkbox" name="One" value="One"> One 
 
    <input type="checkbox" name="Two" value="Two"> Two 
 
    <input type="checkbox" name="Three" value="Three"> Three 
 
    <input type="checkbox" name="Four" value="Four"> Four 
 
    </span> 
 
</div>

來源

2017-07-07 04:19:33

這樣做！謝謝。 –

你複選框的兩側添加了補

/*margin: 0 20px;*/ 
    margin-left: 40px;

.checkboxes { 
 
    text-align:center; 
 
} 
 

 
.checkboxes input{ 
 
    /*margin: 0 20px;*/ 
 
    margin-left: 40px; 
 
}

<div class="checkboxes"> 
 
    <span> 
 
    <input type="checkbox" name="One" value="One"> One 
 
    <input type="checkbox" name="Two" value="Two"> Two 
 
    <input type="checkbox" name="Three" value="Three"> Three 
 
    <input type="checkbox" name="Four" value="Four"> Four 
 
    </span> 
 
</div>

來源

2017-07-07 04:20:55 bhv

只是包裝在自己的元素中的每個輸入和文字，給他們某種間距：

<div class="checkboxes"> 
    <span> 
    <input type="checkbox" name="One" value="One"> 
    One  
    </span> 
    <span> 
    <input type="checkbox" name="Two" value="Two"> 
    Two 
    </span> 
    <span> 
    <input type="checkbox" name="Three" value="Three"> 
    Three 
    </span> 
    <span> 
    <input type="checkbox" name="Four" value="Four"> 
    Four 
    </span> 
</div>

.checkboxes { 
    padding: 10px; 
} 

span { 
    margin-left: 10px; 
    margin-right: 10px; 
}

https://jsfiddle.net/8to42fz8/5/

此外，你想要用於描述輸入的文本是label，但純文本也在這裏。

來源

2017-07-07 04:31:45 JackHasaKeyboard

回答

相關問題