如何在显示中修复间距：内联块

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;
}

Answer 2

<强> HTML

 <ul>
        <li>Pre-shipment Inspection</li>
        <li>Lift Examination</li>
        <li>Pressure Equipment Inspection Services</li>
        <li>Process and Plant Safety Audits</li>
        <li>Supplier Expediting Services</li>
    </ul>
    <ul>
        <li>Managed Services Solutions</li>
        <li>Industrial Inspection</li>
        <li>3<sup>rd</sup> party Inspection Services</li>
        <li>Supplier Evaluation Audit</li>
        <li>Lifting / Construction Equipments Inspection Services</li>
    </ul>
    <ul>
        <li>Equipment Integrity Services</li>
        <li>Risk Based Inspection</li>
        <li>worldwide inspection services at vendor premises / Final Inspection of Equipments</li>
        <li>Technical Inspection Services / Source Inspection including Steel Pipes, Vessels, Tanks, Exchangers, Valves, etc</li>
    </ul>

<强> CSS

ul{
    width:30%;
    float:left;
    padding: 0px;
}
li {
    list-style: none;
    display: inline-block;
    position: relative;
    vertical-align: top;
    color: #999;
    padding-right: 11px;
}

检查以下jsfiddle链接。

Click Here