css - 输入范围内的定位 - 在小屏幕上不随输入框移动

Question

我试图在输入框内放置一个放大镜跨度。问题是当调整浏览器大小时输入框滑到选择框下方，放大镜跨度停留在顶部。

<select id="documentscomparator" class="dropdown" name="documentscomparator">
  <option value="LIKE">like</option><option value="EQUALS">equals</option>
  <option value="NOTEQUALS">not equals</option>
  <option value="GREATERTHAN">greater than</option>
  <option value="LESSTHAN">less than</option>
  <option value="BETWEEN">between</option>
  <option value="ISNULL">is null</option>
  <option value="NOTNULL">is not null</option>
  <option value="IN">in</option>
</select>

<span class="magnifyingGlass"></span>

<input type="text" value="">

span.magnifyingGlass {
    width: 1.6em;
    position: absolute;
    margin-top: 3px;
    z-index: 999
}
span.magnifyingGlass:before {
    width: 1.6em;
    content: "⚲";
    font-size: 1.2em;
    text-align: center;
    transform: rotate(45deg);
    display: block;
}
input[type="text"] {
    border-radius: 3px;
    border: 1px solid lightgrey;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative
}

请查看 fiddle 并调整浏览器大小以了解我的意思: 1 https://jsfiddle.net/u0xyLxog/2/

我得到的:

[

这是我想要的样子:

Answer 1

将 input 和 span 放在一个带有 white-space:no-wrap 的内联 block 中，以便它们始终粘在一起。我添加了一个 ID 为 oneline 的 div。请检查它的样式。 (请全屏查看代码片段并调整屏幕大小以查看结果。)

span.magnifyingGlass {
    width: 1.6em;
    position: absolute;
    margin-top: 3px;
    z-index: 999
}
span.magnifyingGlass:before {
    width: 1.6em;
    content: "⚲";
    font-size: 1.2em;
    text-align: center;
    transform: rotate(45deg);
    display: block;
}
input[type="text"], input[type="text"].searchable {
    border-radius: 3px;
    border: 1px solid lightgrey;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative
}

#oneline{
white-space:no-wrap;
display:inline-block;
}

#documentscomparator{width:400px;}

<select id="documentscomparator" class="dropdown" name="documentscomparator">
  <option value="LIKE">like</option><option value="EQUALS">equals</option>
  <option value="NOTEQUALS">not equals</option>
  <option value="GREATERTHAN">greater than</option>
  <option value="LESSTHAN">less than</option>
  <option value="BETWEEN">between</option>
  <option value="ISNULL">is null</option>
  <option value="NOTNULL">is not null</option>
  <option value="IN">in</option>
</select>

<div id="oneline">
<span class="magnifyingGlass"></span>
<input type="text" data-storable="document-document" id="document" data-object="document-document" class="nestable searchable storable" name="document" value="">
</div>