CODEWITHSUNDEEP
htmlcsswordpress
David J
David J

Reputation: 49

How to align checkboxes horizontally with CSS

I am trying to horizontally align the checkboxes that appear above the dropdowns on the yellow search bar on this page.

I thought that inline block CSS might be the right way to do this, but I can't seem to get it to work.

I'd be most grateful to know if you have any suggestion of the best way to do this?

Thank you!

Upvotes: 1

Views: 27197

Answers (8)

TeoTN
TeoTN

Reputation: 509

A very modern and flexible solution would be to use flexbox. E.g.:

ul.categorychecklist {
    list-style:none;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

This is how we do it in 2016 :) For more details see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 4

Iván Rodríguez Torres
Iván Rodríguez Torres

Reputation: 4451

You can also make the trick using float, as you could see in this fiddle:

https://jsfiddle.net/v7thvxjj/2

Note: remember to remove empty ul from the HTML code

Upvotes: 0

Aswin
Aswin

Reputation: 53

Your code will go as follows

 <style>
.row-cb {width: 285px;margin: auto; }
.row-cb label { float: left;  }
.row-cb span { float: left; text-align: left; }
.clear-both {clear: both}
</style>

<div class="row-cb">
      <span><input name="option" id="cb1" type="checkbox" /></span>
      <label for="cb1">checkbox-001</label>      
      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb2" type="checkbox" /></span>
      <label for="cb2">checkbox-002</label>

      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb3" type="checkbox" /></span>
      <label for="cb3">checkbox-003</label>

      <div class="clear-both"></div>
</div>
<div class="row-cb">
      <span><input name="option" id="cb4" type="checkbox" /></span>
       <label for="cb4">checkbox-004</label>

      <div class="clear-both"></div>
</div>

Output will be

Upvotes: 0

Oskar Szura
Oskar Szura

Reputation: 2549

For ex. by doing:

ul.categorychecklist  { // .categorychecklist - will apply only to this menu
  list-style: none; // remove discs
}
ul.categorychecklist li {
  display: inline-block; // order inline
}

Upvotes: 0

Theodore K.
Theodore K.

Reputation: 5176

Another option

.popular-category {
    display: inline; 
}

you may also want to add a padding-right: 15px; on the above

Upvotes: 0

Minal Chauhan
Minal Chauhan

Reputation: 6148

Try this: this code make your checkbox horizontally.

ul.categorychecklist {
        list-style: none;
        margin: 0;
        padding: 0;
}
ul.categorychecklist li {
     float: left;
     padding-right: 10px;
}

Upvotes: 0

Sree KS
Sree KS

Reputation: 1353

Yes display inline-block is the right way to do this . but you have to add it at the right place Please add this in your css 

 .categorychecklist li {
        display: inline-block;
    }

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

ul.categorychecklist li {
 display: inline-block;
}

Add this code in your CSS file to make the check-boxes inline.

Upvotes: 0

Related Questions