動的に作成された要素は、私は2つのスパン要素を持つdiv要素Aを持っている

Question

間隔失いますワークスペース '： This is how it looksと This is how the should look：

$(document).on('click', '#workspace-name', function() { 
    $('#layout-workspace-name').empty(); 
    $('#layout-workspace-name').append(
     '<input id="edit-workspace-name" value="' + workspace_name + '" type="text">'+ 
     '<span id="submit-name" class="glyphicon glyphicon-ok"></span>'+ 
     '<span id="cancel-name" class="glyphicon glyphicon-remove"></span>'); 
}); 

問題は、私はこのコードを追加する場合、要素はこのように、それらbeetwen間隔を失うということです。私の英語のためのすべてと気の毒ため

#layout-workspace-name { 
    position: relative; 
    float: left; 
    top:50%; 
    transform: translateY(-50%); 
} 

#workspace-name { 
    font-size: 1.3em; 
    color: #FFFFFF; 
} 

#submit-name { 
    color: white; 
    padding: 7px; 
    background: #00D159; 
    border-radius: 5px; 
} 

#cancel-name { 
    color: white; 
    padding: 7px; 
    background: #d10003; 
    border-radius: 5px; 
} 

ありがとう： は、ここで私は、これらの要素に使用するCSSです。

Answer 1

HTMLでは、実際には空白が重要です。要素間に空白がある要素は、要素がない要素とは異なるスタイルになります。要素を正しく表示するには、要素の間に空白を挿入する必要があります。 これでjQueryコードを置き換えるとうまくいくはずです。私が変更したのは、各行の後に1つのスペースを追加することでした。 （追加の+演算子は、それがより明確にするためにありますが、それらを除去することができる）

$('#layout-workspace-name').append(
    '<input id="edit-workspace-name" value="' + workspace_name + '" type="text">'+' '+ 
    '<span id="submit-name" class="glyphicon glyphicon-ok"></span>'+' '+ 
    '<span id="cancel-name" class="glyphicon glyphicon-remove"></span>'+' '); 

注：空白が重要であるが、その空白の量は、タブリターンとスペースの任意の組み合わせが、常にそうではありません同じように扱った。