html - 包装时将元素保持在一起

Question

在我的 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>

Answer 1

为什么不把显示属性改成

{
display:inline;
}

编辑:那么: {overflow: hidden} 呢？行吗