html - 如何使某些东西不以响应形式包装？

Question

我正在尝试创建一个响应式表单，其中有些东西可以换行，有些则没有。

我希望表格在桌面上看起来像这样

在手机上喜欢这个

请注意，该图标位于右侧。不幸的是，我不能为图标使用背景图像，因为我需要在悬停图标时显示工具提示。

但是，当我尝试这样做时，图标会换行:

那么，我怎样才能使图标成为它自己的元素(span 或 div)，而不是环绕在文本字段下方？

这是一次尝试:http://jsfiddle.net/XVu6V/

这里是 Bootstrap 3 尝试:http://jsfiddle.net/syhLJ/1/我真的很想使用 Bootstrap。

这是一些 HTML:

<div text-element class="form-group row">
    <label for="firstName" class="col-md-2 control-label">First Name</label>
    <div class="col-md-5">
        <input type="text" class="form-control" id="firstName" />
    </div>
    <div class="col-md-1 validation-icon required"></div>
    <div class="col-md-3 validation-message">
        Needed for communication.
    </div>
</div>

Answer 1

为什么不包装图标和<input>在一个 div 中，将该 div 设置为 position:relative并添加 padding-right图标的宽度相同。然后设置 <input> 100% 宽和图标 position:absolute;top:0;right:0 ？这将强制图标始终位于 <input> 的右侧。 .

类似于 http://jsfiddle.net/syhLJ/7/ .

您可以在 http://fiddle.jshell.net/syhLJ/7/show/ 查看它的 HTML 预览。 ，我经常使用这个解决方案，到目前为止它从未失败过。