Help with CSS for li?

Lounge
1

Edit: Figured it out; answer at the bottom.

Original post:

I'm hoping someone can help me with this. I would like my checklist items to be closer together, vertically. I was able to accomplish this with CSS for checklist items that have the same level of indentation, but not for nested checklist items:

image

I don't really know what CSS to write, if it's possible, to affect the nested checklist items. The pointer in the Development Tools box is not finding much for me, and I am not a web developer, so I don't have much of a clue.

The CSS that worked for same-level checklist items was:

li {
  margin-bottom: 0em;
  }

The only thing I knew to try for the nested items was (which didn't work):

ul {
  margin-bottom: 0em;
  }

Any guidance is much appreciated!

Edit: Okay, I figured it out with the help of the Development Tools pointer and somebody's CSS they had done on unordered lists in the "Share your CSS" thread.

I guess checkbox lists are ordered (?); not sure. I applied CSS to both list types and that fixed the issue:

ol, ul {
  margin-top: 0em;
  margin-bottom: 0em;
}

I still have to play with the look a bit, but overall, it's solved. :slight_smile:

2 Likes
2

Great to have an answer added.

Could well help others.

Keith

1 Like