HTML：如何在div包装中创建一系列复选框到下一行？

Question

So I have a database of cooking recipes, and I'm making a web form which will eventually connect to the database to add entries to it. One column in the database is "tags". The web form will show all the tags that have been used before (with checkboxes), and give the user the option to add a new tag which will appear as a new checkbox next to the existing ones.

PROBLEM #1: Right now the tags are separated by 1 space, but I'd like them to be separated by a larger gap so that it looks better. What is the best way to do this?

PROBLEM #2: As more tags are added, they will eventually reach the right edge of this fieldset. What is the best way to make them wrap to the next line and ensure that the space(s) between the new tag and the previous one are ignored? (Otherwise the new tag might be indented on the next line which I do not want!)

THE HTML CODE:

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

THE JAVASCRIPT:

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

Thank you!

Answer 1

Firstly, your tags (like "Dessert") should be in a <label> tag so:

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

If you click on the word now, it will activate the checkbox in front of it.

Then to make a bigger gap: use CSS:

label{
    margin-right: 2em;
}

this will give a gap that is the size of 2 letters m between your labels

Answer 2

您可以为标签中的每个复选框包装标签，并为标签添加右边距。

Answer 3

I guess this can solve problem 1 & 2...

wrap each tag like this:

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

css:

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

Answer 4

Modify the markup so that the checkbox block is like this (note that there are other things to fix, eg you are now trying to put fieldset inside p , which is invalid and won't work):

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

Use CSS code like this:

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

I'm using large spacing just to make things clearer; 2em would probably suffice—just remember to make the negative left margin value match the padding value.

Answer 5

Try putting your code this way

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

​