0

添加新标签

所以我有一个烹饪食谱数据库，我正在制作一个网络表单，该表单最终将连接到数据库以向其中添加条目。数据库中的一列是“标签”。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('????????');
    }
 });

谢谢！

4

5 回答 5

2

首先，您的标签（如“甜点”）应该在<label>标签中，因此：

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

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

然后做一个更大的差距：使用CSS：

label{
    margin-right: 2em;
}

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

于 2012-04-25T05:25:33.627 回答
0

您可以将每个复选框的标签包装在标签中，并为标签添加右填充。

于 2012-04-25T05:25:28.933 回答
0

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; }
于 2012-04-25T05:30:18.507 回答
0

修改标记，使复选框块是这样的（请注意，还有其他问题需要修复，例如您现在尝试将其放入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 可能就足够了——只要记住让负的左边距值与填充值匹配。

于 2012-04-25T06:04:34.887 回答
0

尝试以这种方式放置您的代码

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

​</p>

于 2012-04-25T06:34:12.957 回答