Javascript 两列无序列表中不需要的间距

我想创建一个两列列表，从左到右再向下填充项目。问题是当一个多行项目出现在右侧时，我会得到不必要的间距。 注意“大咖啡”左边的空白处。由于“大咖啡”分为两行，因此左栏“茶”上方的空间太大。我想把它扔掉，把它堆起来，只留3%的利润

如何在没有这些额外间距的情况下将下面的列表项堆叠在另一个列表项上？ 下面是我的html示例代码

样本页
李{
浮动：左；
宽度：40%；
显示：块；
利润率：3%；
背景：米色；
}
.list_容器{
宽度：200px；
}
样本清单

咖啡新咖啡新咖啡
茶
牛奶
大咖啡
茶
牛奶
咖啡
茶
牛奶

只需将

边距

值更改为您需要的值，例如：

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3% 0;
    background: beige;
}

样本页
李{
浮动：左；
宽度：40%；
显示：块；
利润率：3%0；
背景：米色；
}
.list_容器{
宽度：200px；
}
样本清单

咖啡新咖啡新咖啡
茶
牛奶
大咖啡
茶
牛奶
咖啡
茶
牛奶

使用此jquery代码以除去特定的空间

$('li').each(function() {
   var li = $(this).height();
   if(li > 18) {
     $(this).next("li").css({"margin-top":"0","margin-bottom":"0"});
   }
});

---

你应该在你的财产“边距”中清楚地指定你想要去除的空间

li{
    float: left;
    width: 40%;
    display: block;
    margin: 3%; /* this will just create 3% equal spacing in top, right, bottom, left */
    background: beige;
}

保证金属性

页边距：[上][右][下][左]

e、 g

利润率：10px 5px 15px 20px

• 上页边距为10px

• 右边距是5px

• 底边是15px

• 左边距是20px

利润率：10px 5px 15px

• 上页边距为10px

• 左右边距为5px

• 底边是15px

利润率：10px 5px

• 上下页边距为10px

• 左右边距为5px

边际：10px

• 所有四个边距都是10px

---

有关更多信息，请参阅此页。

Cou可以将

宽度更改为
50%
，将
边距更改为
3%0

最后的CSS代码是：

li {
    float: left;
    width: 50%;
    display: block;
    margin: 3% 0;
    background: beige;
}

希望通过设置
margin:3%来帮助您在顶部、右侧、底部和左侧提供了3%的保证金。您可以设置顶部和底部、左侧和右侧，如：
margin:3%0@cheshire边距用于区分项目。本次发行没有3%的保证金。还有更多的间隔。请注意红色圆圈中的间距。谢谢您的建议。但问题不在于我给出的保证金价值。它比我给的边距要大。如果右侧的项目具有更高的高度，则额外的高度反映为左侧项目上方的空白
li {
    float: left;
    width: 50%;
    display: block;
    margin: 3% 0;
    background: beige;
}