CSS缺失保證金

我已經使用jQuery的.append()函數來創建一組的div其包裝一些<input />和<span>，但之後，我創建的div，它缺少<input>標籤之間的空白，就像下面的圖片：CSS缺失保證金

圖像與餘量： enter image description here

無空白圖像（jquery的創建）： enter image description here

的HTML代碼：

<div class="controls"> 
    <input type="text" class="span3" name="name" placeholder="規格名稱" /> 
    <input type="text" class="span3" name="name" placeholder="商品價格" /> 
    <input type="text" class="span3" name="name" placeholder="商品原價" /> 
    <input type="text" class="span2" name="name" placeholder="商品庫存" /> 
    &nbsp;&nbsp;&nbsp; 
    <span id="good_sku_add" class="icon-plus"></span> 
</div>

jQuery代碼：

$('#good_sku_add').click(function(){ 
    html = ''; 
    html += '<div class="controls">'; 
    html += '<input type="text" class="span3" name="name" placeholder="規格名稱" />'; 
    html += '<input type="text" class="span3" name="name" placeholder="商品價格" />'; 
    html += '<input type="text" class="span3" name="name" placeholder="商品原價" />'; 
    html += '<input type="text" class="span2" name="name" placeholder="商品庫存" />'; 
    html += '&nbsp;&nbsp;&nbsp;'; 
    html += '<span id="good_sku_add" class="icon-plus"></span>'; 
    html += '</div>'; 

    $(this).parent().after(html); 
    $(this).parent().parent().trigger('create'); 
    })

我搜索的計算器和谷歌文檔一些，但它不能正常工作，任何人都可以給我一些想法？

來源

2015-07-21 土豆丫

：就在你的輸入代碼每一行的末尾添加一個嗎？ – epascarello

這並不是說缺少保證金，現在缺少的是隻是一個（內聯元素是空白敏感）的輸入之間的空間。你爲什麼不使用填充/利潤率

html += '<input type="text" class="span3" name="name" placeholder="規格名稱" /> '; 
                      ^

jsFiddle example

來源

2015-07-21 17:37:09 j08691

謝謝，你是對的！但這是如何工作的？爲什麼空白區使用html實體「」？ –

我不明白您的評論對 – j08691

我的意思是在HTML中，如果我想顯示一個白色的空間，我們應該用「」不只是輸入鍵盤的「空格」鍵？對不起我的英語不好.. –

中動態創建的版本 <input />標籤之間

你錯過了空間。

例如，試試這個：

html = ''; 
html += '<div class="controls"> '; 
html += '<input type="text" class="span3" name="name" placeholder="規格名稱" /> '; 
html += '<input type="text" class="span3" name="name" placeholder="商品價格" /> '; 
html += '<input type="text" class="span3" name="name" placeholder="商品原價" /> '; 
html += '<input type="text" class="span2" name="name" placeholder="商品庫存" /> '; 
html += '&nbsp;&nbsp;&nbsp;'; 
html += '<span id="good_sku_add" class="icon-plus"></span>'; 
html += '</div>';

說明：

在HTML版本中，<intput />標籤之前是空白（縮進）呈現時，壓縮成一個空白字符。在您的HTML版本中，由於字符串連接方式，標籤之間根本沒有空白。

A（主觀）清潔劑的做法可能是試試這個：

var html = [ 
    '<div class="controls">', 
    '<input type="text" class="span3" name="name" placeholder="規格名稱" />', 
    '<input type="text" class="span3" name="name" placeholder="商品價格" />', 
    '<input type="text" class="span3" name="name" placeholder="商品原價" />', 
    '<input type="text" class="span2" name="name" placeholder="商品庫存" />', 
    '&nbsp;&nbsp;&nbsp;', 
    '<span id="good_sku_add" class="icon-plus"></span>', 
    '</div>' 
].join(' ');

來源

2015-07-21 17:35:36 jmar777

CSS缺失保證金

回答

相關問題