在jQuery中克隆時處理格式化空間的最佳方法是什麼？

所以我有一些jQuery的在這裏工作：http://jsfiddle.net/8VtZf/在jQuery中克隆時處理格式化空間的最佳方法是什麼？

enter image description here

這是怎麼看的開始......有（1）和（2），當我點擊添加按鈕，它將克隆最後一個，並增加數字。這一切都工作正常，信息開始爲：

<div class="inputClones"> 
    <input class="inputButton" type="button" name="result[]" value="1" /> 
    <input class="inputButton" type="button" name="result[]" value="2" /> 
</div>

當我單擊克隆按鈕時出現問題。克隆會發生的元件，但它不會保留格式...與結果代碼如下：

<div class="inputClones"> 
    <input class="inputButton" type="button" name="result[]" value="1" /> 
    <input class="inputButton" type="button" name="result[]" value="2" /><input class="inputButton" type="button" name="result[]" value="3" /><input class="inputButton" type="button" name="result[]" value="4" /> 
</div>

enter image description here

正因爲如此，之間的間距inherint（1）和（2），將在添加的克隆之間丟失。什麼是最好的方式來添加這個額外的間距？

來源

2014-01-11 Jason Axelrod

顯示UD你的CSS –

你應該使用CSS這一點。不同的瀏覽器有不同的內置樣式表。 – BenM

沒有CSS –

您可以使用的一種技巧是將父元素的字體大小設置爲0.這適用，因爲奇怪的間距是由後續的input元素之間缺少空格字符引起的。

.inputClones { 
    font-size: 0; 
}

Here's a working fiddle for the above。

如果要在按鈕之間自定義間距，只需在inputButtons上添加一個邊距右邊。

.inputButton { 
    margin-right: 8px; 
}

Working fiddle with custom button spacing。

如果你想讓實際的空間角色保持不變，那麼我認爲你的運氣不好。

來源

2014-01-11 19:50:31 knrz

但是如果我想要這個空間呢？ –

@JasonAxelrod然後檢查我的答案。只有保證一致性的方法。 – BenM

請參閱更新的答案。 – knrz

在CSS中加入恆緣像

CSS：

.inputButton { 
margin-right:1% 
}

HTML：

<div class="inputClones"> 
    <input class="inputButton" type="button" name="result[]" value="1" /><input class="inputButton" type="button" name="result[]" value="2" /> 
</div> 
<br /> 
<input type="button" value="Add Button" class="addButton">

jQuery的沒有任何修改 DEMO

來源

2014-01-11 19:50:40

CSS不是解決方案......因爲它仍然在第一個元素中有額外的空間......基本上右邊的邊距變成了極限右邊：1％......加上額外的空間。它不是恆定的。 –

與我在那裏提供的HTML是**沒有**問題;）特別爲您添加演示 –

依託瀏覽器樣式和佈局元素是一個壞主意。你會好得多定義按鈕一些CSS：

.inputClones input[type="button"] { 
    float: left; 
    margin-right: 10px; 
} 
    .inputClones input[type="button"]:last-child { 
     margin-right: 0; 
    }

jsFiddle Demo

來源

2014-01-11 19:52:01 BenM

在jQuery中克隆時處理格式化空間的最佳方法是什麼？

回答

相關問題