Html 包装时使元素保持在一起

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

---

为什么不将“显示”属性更改为

{
display:inline;
}

编辑：

---

那么：{overflow:hidden}呢？那行吗

我看到你用的是同一张图片。通过删除这些图像并使用css，可以更好地简化标记

演示：

标记：

使用

空白：nowrap将其保存在一起

注意：不能在
输入
本身上使用
:after
伪类，因为它们被替换为元素，而
:after/:before
仅对包含的元素起作用。因此，我们使用可用的
span

更新：如果要将单击事件处理程序附加到图像，请参见以下内容：

您可能需要使用固定宽度。这样，包装元素就不会在某个点以下调整大小，从而迫使图像移到下一行。或者至少最小宽度，以便在某一点停止调整大小。
内联块
更可取……如果以后需要，内联将难以设置元素的样式和位置！！谢谢，{display:inline block；}非常适合我，当我将文本划分为列时，我希望将例如一个表放在一列中。我需要图像，因为用户将单击图像以删除输入字段的内容。由于您正在设置conent字段，因此无法将onclick事件附加到图像。@AndroidDev:此外，仅将显示作为
inline
或
inline block
将如何防止换行？你能给我看一下吗？什么是：after是？@FranciscoCorrales:
：after是一个伪元素。（请参阅：）在我的示例中，我无法将单击直接绑定到图像，因为不能以伪元素为目标。因此，我的目标是容器和
。而不是
输出
输入
@FranciscoCorrales：我的答案中已经有了这个例子！
<span class="i"><input type="text" /></span>
<span class="i"><input type="text" /></span>
<span class="i"><input type="text" /></span>
...

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