javascript - Knockout foreach 中的意外空格

Question

在 Knockout 中，我有一个 foreach 来按比例显示颜色列表。

但是现在试图解决间距问题时，发现问题有点像 Knockout。

基本设置数组中每个元素的背景颜色。 因为我非常喜欢缩进的源代码，所以 html 看起来像这样:

<div class="color-scale" data-bind="foreach: colors">
    <div class="color-scale-item horizontal" data-bind="style: {backgroundColor: $data}"></div>
</div>

JSFiddle

有 CSS 样式内联 block ，它不放置任何空间。

比例看起来不错，但添加 90 多种颜色，并不总是需要那个空间。那么如何去除呢？

空间仅仅是由于每个 div 的计算 html 中的返回行和间距。

我试过改变跨度，结果相同。

那么有没有一种方法可以用“很好”的书面源来编写 knockout ，但不会产生不需要的空间，而不用写在一行上？

<div class="color-scale" data-bind="foreach: colors"><div class="color-scale-item horizontal" data-bind="style: {backgroundColor: $data}"></div></div>

JSFiddle single line

Answer 1

这与 Knockout JS 无关。您的问题与 display: inline-block 有关。这应该让你继续:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

在您的情况下，您可能会使用表格布局:

.color-scale {
    display: table;
}

.color-scale span { /* These spans still left 1px spaces. */
    display:none;
}

.color-scale-item {
    width: 2px;
    height: 20px;
    display:table-cell;
}

fiddle :http://jsfiddle.net/uqvb2fou/3/

更新:

考虑到您的用例，您可能只需:

.color-scale {
    font-size: 0;
}