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来设置Inline-block的样式,它不会放入任何空间.

比例看起来不错,但添加了90多种颜色,并不总是需要这个空间.那么如何删除？

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

我尝试过跨越,同样的结果.

那么有没有办法用'精美'书面来源写出淘汰赛,但是如果没有在一行上书写就不会产生不需要的空格？

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

JSFiddle单行

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

小提琴:http://jsfiddle.net/uqvb2fou/3/

更新:

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

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