1. 首页
  2. 问答
  3. 用div和复选框来获得更好的效果

用div和复选框来获得更好的效果

2016-11-24 36 views
0

我已经注册了我创建的网页，感谢这里的人们。我只是做了一些调整，然后才尝试做出反应。如何在复选框及其文本和底部棒的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 protected]"> 
         </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; 
}

enter image description here

来源

2016-11-24 RagnaLugria

回答

2

只需添加margin-right到您的复选框：

input[type="checkbox"]{ 
margin-right: 20px; 
}

，并在底部的缝隙添加margin-bottom到最后孩子身体

body div:last-child{ 

    margin-bottom:50px; 
}

Working demo

来源

2016-11-24 19:19:21 Chiller

+0

感谢复选框，它的工作:)。但填充底部没有效果 – RagnaLugria

+0

我编辑了我的答案......将margin-bottom添加到主体的最后一个孩子:) – Chiller

0

必须在https://jsfiddle.net/yh12c61k/2/我添加上的复选框一个margin-right: 10px;一看，它看起来更漂亮

input[type="checkbox"]{ margin-right:10px; }

来源

2016-11-24 20:29:10

相关问题

 相关问题