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}？那工作

Answer 2

我看到你正在使用相同的图像。您可以通过删除这些图像并使用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;将它们保持在一起。

注意：无法在:after本身上使用input伪类，因为它们是替换元素而:after / :before仅适用在包含元素。因此，我们使用可用的span代替。

更新：如果要将click事件处理程序附加到图像，请参阅：

<强> http://jsfiddle.net/abhitalks/pjqUW/2/

包装时将元素保持在一起

2 个答案: