我正在尝试为我的网站创建像 stackoverflow 这样的标签，我网站上的用户将创建用于过滤结果或许多其他操作（如搜索、专业知识等）的标签。

我能够创建标签，但无法像我们在 stackoverflow 中那样在输入框中显示它，标签之间的边距存在问题。每次我创建标签时，它都会对齐，但没有空间或边距。 目前，它显示所有内联标签，没有任何空格。

jQuery 我尝试过-

$(function () {        
    $("#inputtext").keypress(function (e) {
        var valueofinput = $(this).val();
        if (e.which == 13) {
            $('.tag').html(valueofinput);
            $('.tag').show();
        }
    });

    $('.tag').click(function () {
        $(this).hide();
    });        
});    

不过我尝试在输入标签中显示它，如下所示-

if(e.which==13)
{
$("#inputtext").val().addClass('tag').css('display','inline-block');
}
if(e.which==32)     //for space
{
$('.tag').css('margin-left','5px');
}

但这行不通。

Jsfiddle http://jsfiddle.net/stackmanoz/Hb8yj/

简短的回答：你不能/不。但你可以表现出你本来的样子。

更长的答案：Example http://jsfiddle.net/Hb8yj/13/

$(function(){    
    $("#inputtext").keypress(function(e){
        var valueofinput= $(this).val();
        if(e.which==13)
        {
            $('#inputtext').before('<span class="tag">' + valueofinput + '</span>');
            $('input').val('');
        }
    });
    $(document).on('click', '.tag', function(){
        $(this).remove();
    });
    $('.inputholder').click(function() { $('#inputtext').focus(); });
});