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

有用于设置Inline-block样式的CSS，它不会放入任何空间。

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

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

我尝试过跨越，同样的结果。

所以有没有办法用“很好地”和“＃39;书面来源，但不会产生不需要的空格，而无需在一行上书写？

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

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

更新：

考虑到你的用例，你可能只会：

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

Answer 2

使用repeat绑定将起作用，因为它重复单个元素而不在它们之间插入空格：

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

http://jsfiddle.net/mbest/uqvb2fou/4/

Knockout foreach中的意外空间

2 个答案: