列出同一 p 标签中的选定复选框选项 - 使用 Svelte

Question

我目前正在学习如何在 Svelte 中使用绑定。我找到了我正在练习的这个例子，并且想稍微改变一下代码。我正在尝试使所选项目出现在同一行的 1 个标记中，而不是为每个选中的选项显示多个 p 标记。

• 如果 Roger 和 Syd 都被选中，那么我不想在一行中列出 Roger，然后在下面的另一行中列出 Syd，我只想拥有 --> Roger, Syd（在单个 p 标签中的同一行上）。李>

我知道我只需要搭便车，但我不确定我可以用什么来代替它。我仍然想让这个例子尽可能简单。示例如下：

  <script>
    let goodDogs = []
    let dogs = ['Roger', 'Syd']
</script>

<h2>
    Who's a good dog?
</h2>

<p>
    {#each dogs as dog}
        <p>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></p>
    {/each}
</p>

<h2>
    Good dogs according to me:
</h2>

<p>
    {#each goodDogs as dog}
        <p>{dog}</p>
    {/each}
</p>

Answer 1

这不是一个真正的 Svelte 问题，更像是一个一般的 HTML 问题。也就是说，我想，如果我理解正确的话，你会想要做如下的事情，你有你的#each for dogs：

<p>
    {#each dogs as dog}
            <span>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></span>
    {/each}
</p>

发生的事情是我们交换了一个块标签

（一个位于它自己的空间中），用于内联标签（一个可以与其他标签并排放置的标签）。您可以通过 CSS 控制这些属性，但通常您不应尝试更改元素的默认显示，这更有可能表明您使用了错误的标签类型。

还有一点值得注意的是嵌套

不建议使用

标签，将外部标签更改为 a 以包含元素可能更合适。

通常，您可能会出于上述目的使用 an，它是用于描述列表的标记。然后，您可以将列表样式设置为水平而不是垂直 - 网上有很多教程。详情about the ul tag can be found here

您可能会注意到您的列表过于密集且过于紧密。您可以考虑向列表项（或跨度标签）添加填充。同样，这可以通过 CSS 进行控制。

还有一点要讨论您在此处使用的 h2 标签，因为它们是标题，并不完全适合您想要实现的目标，但同样，就简单地回答这个问题而言，我上面提到的修复将解决眼前的问题，并给出了关于学习更多关于 HTML 和 CSS 的建议。

希望这会有所帮助！