HTML：如何在div包裝中創建一系列復選框到下一行？

Question

所以我有一個烹飪食譜數據庫，我正在制作一個網頁表格，最終將連接到數據庫以添加條目。 數據庫中的一列是“標簽”。 Web表單將顯示之前使用過的所有標簽（帶有復選框），並為用戶提供添加新標簽的選項，該標簽將顯示為現有標簽旁邊的新復選框。

問題＃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的間隙

Answer 2

您可以為標簽中的每個復選框包裝標簽，並為標簽添加右邊距。

Answer 3

我想這可以解決問題1和2 ......

像這樣包裝每個標簽：

<div class="wrapper">
    <input type="checkbox" name="tags" value="Dessert">Dessert
</div>

CSS：

.wrapper { margin-right:10px; float:left; }

Answer 4

修改標記，使復選框塊像這樣（請注意，還有其他事情需要修復，例如，您現在嘗試將fieldset放在p ，這是無效的，不起作用）：

<div class="tags">
<label><input type="checkbox" ...>Dessert</label>
<label><input type="checkbox" ...>Fast</label>
...
</div>

使用這樣的CSS代碼：

.tags { margin-left: -4em; }
.tags label { padding-left: 4em;  white-space: nowrap; }

我使用大間距只是為了讓事情更清晰; 2em可能就足夠了 - 只記得使負左邊距值與填充值匹配。

Answer 5

嘗試以這種方式放置代碼

HTML：

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

使用Javascript：

$("input[value='Add']").click(function(event){
    event.preventDefault();
    tagAdded = document.getElementById('addtag').value;
    if (tagAdded!=null && tagAdded.trim()!="") {
        $('.tags').append('<p> <input type="checkbox" name="tags" value="' + tagAdded.trim() + '" /> ' + tagAdded.trim() + '</p>');
    }
 });​

CSS：

div { clear:both; }
.tags p {
    float:left;
    margin-right:20px;    
}