Question

add new tags

所以我有一个烹饪食谱数据库，我正在创建一个Web表单，最终将连接到数据库以向其添加条目。数据库中的一列是“标签”。 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>

THE 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＆amp; 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;    
}

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

5 个答案: