javascript - HTML:如何在 div 中制作一系列复选框到下一行？

Question

所以我有一个 cooking 食谱数据库，我正在制作一个网络表单，该表单最终将连接到数据库以向其中添加条目。数据库中的一列是“标签”。网络表单将显示之前使用过的所有标签(带有复选框)，并为用户提供添加新标签的选项，该新标签将显示为现有标签旁边的新复选框。

问题#1:现在，标签之间间隔 1 个空格，但我希望它们间隔更大的间隙，以便看起来更好。最好的方法是什么？

问题#2:随着添加更多标签，它们最终将到达该字段集的右边缘。让它们换行到下一行并确保忽略新标签和前一个标签之间的空格的最佳方法是什么？ (否则新标签可能会在下一行缩进，这是我不想要的!)

HTML 代码:

<p>
    <fieldset>
        <legend>Tags:</legend>
        <span class="tags">
            <input type="checkbox" name="tags" value="Dessert">Dessert  <input type="checkbox" name="tags" value="Fast">Fast  <input type="checkbox" name="tags" value="Entree">Entree
        </span>
        <p>
            <input type="text" id="addtag"><input type="submit" value="Add">
        </p>
    </fieldset>
</p>

JavaScript:

$("input[value='Add']").click(function(event){
    event.preventDefault();
    tagAdded = document.getElementById('addtag').value;
    if (tagAdded!=null && tagAdded.trim()!="") {
        //$('.tags').append('????????');
    }
 });

谢谢!

Answer 1

首先，您的标签(例如“甜点”)应位于 <label> 中标记为:

<input type="checkbox" name="tags" value="Dessert" id="tag-1"><label for="tag-1">Dessert</label>

如果您现在单击该单词，它将激活其前面的复选框。

然后要拉大差距:使用CSS:

label{
    margin-right: 2em;
}

这将在标签之间产生 2 个字母 m 大小的间隙