how to make less space between all button using css

what i am trying to do is when i click on check box then div is display horizontal.

but in my below code when i click on checkbox then div is showing div is vertically.

but i try to make when i click on checkbox then div is show horizontally. how can we do that using CSS

is there any help.

$(document).ready(function() { 
                $('input[type="checkbox"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    $("." + inputValue).toggle(); 
                }); 
            }); 
.selectt { 
            color: #fff; 
            padding: 30px; 
            display: none; 
            margin-top: 30px; 
            width:20%; 
           
        } 
        
        label { 
            margin-right: 15px; 
        } 

       .d-flex-wrapper {
           display: flex;
       }
       .d-flex-wrapper > div{
           margin-right:5px;
       }
       .d-flex-wrapper > div:last-chid{
           margin-right:30px;
       }
       
       .button {

  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
<script src= 
"https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="C"> C</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Cplus"> C++</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Python"> Python</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Java"> Java</label> 
        </div> 
     <div class="d-flex-wrapper">  <!-- Added New div start here -->
        <div class="C selectt"> 
       <button class="button button2">Blue</button>
        </div> 
        
        <div class="Cplus selectt"> 
       <button class="button button2">Blue</button>
       </div> 
        <div class="Python selectt"> 
       <button class="button button2">Blue</button></div> 
        <div class="Java selectt"> 
        <button class="button button2">Blue</button></div>   <!-- Added New div end's here -->
    </div>

Answer

You Can use- Display Flex

$(document).ready(function() { 
                $('input[type="checkbox"]').click(function() { 
                    var inputValue = $(this).attr("value"); 
                    $("." + inputValue).toggle(); 
                }); 
            }); 
    .selectt { 
            color: #fff; 
            padding: 30px; 
            display: none; 
            margin-top: 30px; 
            width:20%; 
            background: green 
        } 
        
        label { 
            margin-right: 20px; 
        } 

       .d-flex-wrapper {
           display: flex;
       }
       .d-flex-wrapper > div{
           margin-right:20px;
       }
       .d-flex-wrapper > div:last-chid{
           margin-right:0px;
       }
<script src= 
"https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<div> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="C"> C</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Cplus"> C++</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Python"> Python</label> 
            <label> 
                <input type="checkbox" name="colorCheckbox"
                    value="Java"> Java</label> 
        </div> 
     <div class="d-flex-wrapper">  <!-- Added New div start here -->
        <div class="C selectt"> 
        <strong>C</strong> 
        is a procedural programming language
        </div> 
        
        <div class="Cplus selectt"> 
        <strong>C++</strong> 
        is a general purpose programming language</div> 
        <div class="Python selectt"> 
        <strong>Python</strong> 
        is a widely used general-purpose, high level 
        programming language.</div> 
        <div class="Java selectt"> 
        <strong>Java</strong> 
        is a most popular programming language 
        for many years.</div>   <!-- Added New div end's here -->
    </div>

I Hope it’s Help You 🙂 Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *