搜索栏中的垂直对齐图标

Question

我知道这个问题似乎很愚蠢，所以我想提前提出政治要求。

我在下面输入以下内容： 一切正常，直到我在顶部添加标签，如下所示：

这是我目前所拥有的：

.inputWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: min-content;
    position: relative;
}    

.icon {
    height: 2.1rem;
    position: absolute;
    right:0;
    font-size: fontSizeBig;
    background: transparent;
    padding: .6rem;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease-out;
}

<div class='inputWrapper'>
    <input/>
    <button class='icon'>
        <icon/>
    </button>
</div>

这里的高度无济于事，我想使图标始终与输入保持一致，而不必担心我可以在顶部放置多少格。

哪个是解决此问题的最佳方法？ 谢谢。

Answer 1

考虑仅在<input/>和<button class="icon"></button>周围放置一个包装纸，这样，如果在包装纸外面添加标签，则不会干扰相对位置：

<div class='outerWrapper'>
    <label><!-- Will not disturb inputWrapper --></label>
    <div class='inputWrapper'>
        <input/>
        <button class='icon'>
            <icon/>
        </button>
    </div>
</div>