尝试在 HTML/CSS 中分隔复选框网格

Question

I want two lines of equally spaced checkboxes. (seven per row first line with captions MON-SUN second row no caption)

I have a span around each of the checkboxes. If I set the Style="display: inline-block; width: 30px" it does what I expect, but when I create a rule in my stylesheet:

.ckwidth {
  display: inline-block;
  width: 30px;
}

and then set the class="ckwidth" on the spans it seems to ignore the rule. What am I doing wrong?

Answer 1

Try out this, might help. if this don't work then share your code.

.dis-flex {
    display: flex !important;
//or
display: inline-flex; 
 .ckwidth {
   margin: auto;
   width: 30px;
  }
}
-----------or----------------
.row {
   margin: auto;
 .ckwidth {
 display: flex !important;
   width: 30px;
  }
}