將元素保留在一起時包裝

在我的HTML中，我有一系列的輸入文本字段，每個輸入的右側有一個圖像，用於刪除圖像左側的字段內容。當瀏覽器水平調整大小時，我希望輸入和圖像一起包裝並保持在一起。目前，如果您將瀏覽器的寬度調整爲某個特定點，則輸入可以顯示在同一行上，而其圖像將在其後顯示。是否有辦法在發生包裝時始終將輸入和圖像保存在一起？將元素保留在一起時包裝

<div style="display:block"> 
    <input type="text" id="inputEventDates" style="margin-right:17px" /> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
    <span><input type="text" /><img src="/images/icon_delete_16x16.png" class="ddelic" /></span> 
</div>

來源

2014-01-14 AndroidDev

您可能需要使用固定的寬度。這樣你的包裝元素不會調整到某個點下面，迫使圖像到達下一行。或者至少是最小寬度，以便在某個點停止調整大小。 – Chausser

你爲什麼不顯示屬性更改爲

{ 
display:inline; 
}

編輯：{溢出：隱藏}約什麼？這是否工作

來源

2014-01-14 05:54:22

已接近。我嘗試了內聯塊，這也起作用。 – AndroidDev

'inline-block'是最好的....內聯將會使得如果需要以後的樣式和定位元素將會很困難！ – NoobEditor

謝謝，{display：inline-block;}對我來說非常完美，當將文本分割成列時，我想保留例如一張表中的一張表。 – gregko

我看到你正在使用相同的圖像。您可以通過刪除這些圖像並使用css來更好地簡化標記。

演示：http://jsfiddle.net/abhitalks/pjqUW/

標記：

<span class="i"><input type="text" /></span> 
<span class="i"><input type="text" /></span> 
<span class="i"><input type="text" /></span> 
...

CSS：

input { display: inline; } 
span { white-space: nowrap; } 
span.i:after { 
    content: url(/images/icon_delete_16x16.png); 
    display: inline; 
    width: 16px; height: 16px; 
}

您使用white-space: nowrap;來磕一起ep。

注：無法input使用:after僞類本身，因爲他們是替換元素和:after/:before僅適用於包含元素。所以，我們使用可用的span來代替。

更新：如果你想點擊的事件處理程序附加到的影像，然後看到：

http://jsfiddle.net/abhitalks/pjqUW/2/

來源

2014-01-14 06:04:47 Abhitalks

我需要有圖像，因爲用戶將點擊圖像以刪除輸入字段的內容。由於您正在設置conent字段，因此無法將onclick事件附加到圖像上。 – AndroidDev

@AndroidDev：爲什麼不呢？檢查出來：** http：//jsfiddle.net/abhitalks/pjqUW/1/** – Abhitalks

@AndroidDev：此外，如何使用顯示器作爲'inline'或'inline-block'來防止包裝？你能告訴我一個小提琴嗎？ – Abhitalks

將元素保留在一起時包裝

回答

相關問題