列出同一 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，它是用於描述列表的標記。 然后，您可以將列表樣式設置為水平而不是垂直 - 網上有很多教程。 可以在這里找到有關 ul 標簽的詳細信息

您可能會注意到您的列表過於密集且過於緊密。 您可以考慮向列表項（或跨度標簽）添加填充。 同樣，這可以通過 CSS 進行控制。

還有一點要討論您在此處使用的 h2 標簽，因為它們是標題，並不完全適合您想要實現的目標，但同樣，就簡單地回答這個問題而言，修復我上面提到的 ve 將解決眼前的問題，並給出了關於學習更多關於 HTML 和 CSS 的建議。

希望這可以幫助！