javascript - 在列表行之间留出空间

Question

所以，我有一个显示在 inline-block 中的元素列表。我想要的是当你点击一个单元格时，它下面的线条会下降。问题是，简单地添加一个 margin-bottom 是行不通的，如 this fiddle 所示。 .

看，应该打开的那个单独留在她的线上。我想要的是这样的:

有什么想法吗？

Answer 1

默认对齐 inline-block元素是baseline , 意味着高和矮的元素将对齐文本行的底部。如果你给 <li>元素 vertical-align: top ，我相信你会得到你想要的；

li {
    list-style-type: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    margin-top: 4px;
    vertical-align: top; /* added */
}

http://jsfiddle.net/j93H5/3/