html - 如何修复显示 :inline-block 中的间距

Question

我有一个具有这种样式的列表:

.og-details li {
    list-style: none;
    display: inline-block;
    width: 30%;
    position: relative;
    vertical-align: top;
    color: #999;
    padding-right: 11px;
}

结果是:

我该如何解决这个问题？我试过 vertical-align:top; 但没有解决问题。

Demo

Answer 1

像这样尝试: Demo

CSS:

li {
    list-style: none;
    position: relative;
    vertical-align: top;
    color: #999;
    padding-right: 11px;
}
ul {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}