帮助div和复选框以获得更好的外观
我有这个注册网页，我帮助感谢这里的人们。在尝试使其响应之前，我只做了一些调整。如何在复选框及其文本与底部的div之间创建空格而没有间隙。有什么建议吗？
https://jsfiddle.net/yh12c61k/
<div class="col-md-offset-2 col-md-8 text-center">
<div class="container-fluid">
<div id="logo-signup">
<img class="img-responsive" src="uv.png">
</div>
<div class="signup-header">
<div class="row">
<label class="uv-header">United Volunteers</label>
<label class="sm-title">Register Using Your Social Media Account</label>
</div>
<br>
<div class="row">
<button type="submit" class="btn-facebook-signup">Register With Facebook</button>
<button type="submit" class="btn-gmail-signup">Register With Google+</button>
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-8 ">
<div class="container-fluid">
<div class="signup-form2">
<label class="signup-title"><span>Personal Information</span></label>
<input type="text" class="signup-input" placeholder="First Name">
<input type="text" class="signup-input" placeholder="Last Name">
<form>
<br>
<select name="Month" class="signup-input" style="width:15%">
<option value="Month" disabled selected >Month</option>
<option value="January">January</option>
<option value="February">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="Day" class="signup-input" style="width:15%">
<option value="Day" disabled selected >Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select name="Year" class="signup-input" style="width:15%">
<option value="Year" disabled selected >Year</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
</select>
<div>
<br>
<label><input type="radio" value="male" checked="" name="gender">Male</label>
<label><input type="radio" value="female"checked="" name="gender">Female</label>
</div>
</form>
<label class="signup-title"><span>Address Information</span></label>
<form>
<select name="Country" class="signup-input" style="width:15%">
<option value="Country" disabled selected >Country</option>
<option value="Brunei">Brunei</option>
<option value="Cambodia">Cambodia</option>
<option value="Indonesia">Indonesia</option>
<option value="Laos">May</option>
<option value="Malaysia">June</option>
<option value="Myanmar">July</option>
<option value="Philippiness">August</option>
<option value="Singapore">September</option>
<option value="Thailand">October</option>
<option value="Vietnam">November</option>
</select>
<input type="text" class="signup-input" placeholder="City" style="width:15%">
<input type="text" class="signup-input" placeholder="Additional Information">
</form>
<br>
<button type="submit" class="btn-register">Retrieve Location</button>
<label class="signup-title"><span>Skills</span></label>
<div class="checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="handyman" checked="" name="gender">Handyman</label>
</div>
<div class="checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="medic"checked="" name="gender">Medic</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="artist"checked="" name="gender">Artist</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="cookery" checked="" name="gender">Cookery</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="mentor"checked="" name="gender">Mentor</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="ecologist"checked="" name="gender">Ecologist</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="tech_guru" checked="" name="gender">Tech Guru</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="pet_rescue"checked="" name="gender">Pet Rescue</label>
</div>
<div class=" checkbox-signup col-lg-4 col-md-4 col-sm-2">
<label><input type="checkbox" value="social_savvy"checked="" name="gender">Social Savvy</label>
</div>
<label class="signup-title"><span>Volunteering Area</span></label>
<form>
<select name="Country" class="signup-input" style="width:15%">
<option value="Country" disabled selected >Country</option>
<option value="Brunei">Brunei</option>
<option value="Cambodia">Cambodia</option>
<option value="Indonesia">Indonesia</option>
<option value="Laos">May</option>
<option value="Malaysia">June</option>
<option value="Myanmar">July</option>
<option value="Philippiness">August</option>
<option value="Singapore">September</option>
<option value="Thailand">October</option>
<option value="Vietnam">November</option>
</select>
<input type="text" class="signup-input" placeholder="City" style="width:15%">
</form>
<label class="signup-title"><span>Account Information</span></label>
<div class="account">
<input type="text" class="signup-input" placeholder="Username">
</div>
<div class="account">
<input type="text" class="signup-input" placeholder="Password">
<input type="text" class="signup-input" placeholder="Confirm Password">
</div>
<div class="account">
<input type="text" class="signup-input" placeholder="email@website.com">
</div>
<button type="submit" class="btn-register">Register</button>
</div> <!-- signup-form -->
</div> <!-- container-fluid -->
</div> <!-- col -->
body {
background-color: #d00025;
background-image: url(hands%20banner.jpg);
background-position:top;
background-size: 50%;
background-repeat:repeat-x;
padding: 0px;
margin: 0px;
}
.signup-header {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
overflow: hidden;
background-color: white;
padding: 25px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
}
.signup-input {
width: 30%;
height: 35px;
padding: 6px 12px;
font-size: 12px;
font-family:Candara;
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f2f2f2;
line-height: 1.5;
margin-right:10px;
}
.signup-form2 {
top:90px;
position:relative;
box-sizing: border-box;
margin: 25px auto;
margin-bottom:0px;
width: 100%;
max-width:1000px;
background-color: white;
padding: 50px 50px 50px 50px;
box-shadow: 1px 5px 2px #330000;
z-index: 1;
}
.uv-header{
font-weight:bold;
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
.sm-title {
float:left;
padding-left:225px;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.sm-signup{
font-size:35px;
font-family:Candara;
float:left;
padding-left:225px;
}
#logo-signup {
top:70px;
left: 15%;
transform: translateX(-50%);
position:absolute;
background-color: white;
background-size: 170px auto;
background-repeat: no-repeat;
height: 170px;
width: 170px;
padding: 0px;
border: 5px solid white;
box-shadow: 1px 3px 2px grey;
z-index: 1;
}
h1 {
font-weight:bold;
font-size:35px;
font-family:Candara;
text-align: center;
margin: 100px auto 50px auto;
}
a {
text-decoration: none;
}
.account{
padding-bottom:25px;
}
span{
background:#fff;
padding:0 10px;
}
.signup-title{
text-align:center;
margin-top:20px;
margin-bottom:20px;
width:100%;
border-bottom:1px solid #000;
line-height:0.1em;
}
.social_media {
text-align:center;
position:relative;
top:-75px;
}
.label {
display: block;
margin-bottom: 5px;
font-weight: bold;
font-family:Candara;
font-size: 20px;
}
.btn-signup {
background-color: firebrick;
font-family:Candara;
font-size: 20px;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width: 200px;
margin:auto;
margin-top:200px;
display:block;
}
.btn-register {
background-color: firebrick;
font-family:Candara;
color: white;
padding: 10px;
border: 1px solid firebrick;
border-radius: 5px;
box-shadow: 2px 4px 4px #330000;
width:30%;
}
.btn-facebook-signup {
background-image: url(fb.gif);
background-color: #3b5998;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family:Candara;
font-size: 16px;
color: white;
}
.btn-gmail-signup {
background-image: url(g+.gif);
background-color: #dc4a38;
padding: 0px;
border: 3px solid white;
border-radius: 5px;
box-shadow: 1px 2px 2px grey;
margin: auto;
background-size: contain;
background-repeat: no-repeat;
height: 50px;
width: 250px;
padding-left:40px;
font-family:Candara;
font-size: 16px;
color: white;
}
.social_media-signup {
display:inline-block;
}
input[type="radio"]{
margin: 0 10px 0 10px;
}
2 个答案:
答案 0 :(得分：2)
只需将margin-right添加到您的复选框：
input[type="checkbox"]{
margin-right: 20px;
}
并且底部的间隙将margin-bottom添加到身体的最后一个孩子
body div:last-child{
margin-bottom:50px;
}
答案 1 :(得分：0)
看看https://jsfiddle.net/yh12c61k/2/我在复选框上添加了margin-right: 10px;，看起来好多了
input[type="checkbox"]{
margin-right:10px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？