Html 删除CSS3列中不必要的空间

我正在试验CSS3中最新的专栏功能。每个

ul

都有不同的高度，我希望它们在上方和下方具有相等的边距。目前，由于一个

ul

比其余的长得多，它正在向下推第二行。最长的

ul

是否可能不在其下方施加如此大的空间

CSS:

HTML:

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目
项目


项目
项目
项目
项目


项目
项目
项目
项目
项目
项目


项目
项目


项目
项目
项目
项目
项目

这是因为空白，通常会导致

4px

偏移，为了解决这个问题，有多种方法，便宜的方法是使用

左边距：-4px

但如果

字体大小>100%

，则此操作将失败，另一种方法是使用

字体大小：0，最后一个是通过粘贴
ul
元素从源代码中取出缩进/空白


您也可以
将元素浮动到
左侧
，但为此，最好将它们包装在容器
div
/
节
元素中


现在我不确定您是否意识到了这一点，但您可能想看看这个属性，它可以在不破坏
ul
元素的情况下完成类似的工作。
这是因为
和
之间存在空间<代码>内联块
元素留有空间

删除空间，即写入
将解决您的问题。
您看到的“列”纯粹是列表内联块的结果，而不是因为您使用的是列宽。列宽属性的工作方式似乎与百分比值的工作方式不同

如果您只需要2列，那么可以使用
列计数：2
而不是
列宽：50%


如果子元素不应跨列拆分，则您要查找的是
break-inside
属性，而不是尝试使用
display:inline block

ul {
    background-color: orange;
    -webkit-column-break-inside: avoid; /* old name */
    page-break-inside: avoid; /* Firefox uses non-standard property */
    break-inside: avoid;
}

您可能希望删除第一个元素的上边距：

ul:first-child {
    margin-top: 0;
}

我不知道你在这里是如何使用列的，也不知道你想删除什么空间。啊，我的下一个问题是：为什么不将列拆分为3：-我在使用
-webkit列计数：3-webkit列宽：30%：
还有我的最后一个问题。。。我怎样才能让这些列占包装器的30%呢？它似乎完全忽略了这一点。你是个传奇人物。谢谢我不知道为什么这不分为4列，但是：@tmyie您使用的是
列计数
属性，使用该属性将子项分为4部分，因此您不需要
内联块
，如果您使用的是
浮动/内联块
您也不需要
列计数
，您不需要
宽度：100%在
ul
上，因为默认情况下它是块级元素
列宽
属性不需要
列计数
：
.wrapper {
    background-color: grey;
    max-width: 600px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
ul {
    background-color: orange;
}

ul {
    background-color: orange;
    -webkit-column-break-inside: avoid; /* old name */
    page-break-inside: avoid; /* Firefox uses non-standard property */
    break-inside: avoid;
}

ul:first-child {
    margin-top: 0;
}