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 样式内联块，它没有放入任何 space。

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

space 仅仅是由于 return 行和每个计算 html 中的间距 div。

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

那么有没有一种方法可以用 'nicely' 写入源代码来编写敲除，但不会产生不需要的 spaces，而不用写在一行上？

<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/

在您的情况下，您可能会使用 table 布局：

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

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 中的意外空格

Unintended spaces in Knockout foreach

javascript

html

css

knockout.js

spaces