在搜索栏中定位图标时出现问题

Question

在此 div 中，我有一个搜索栏输入、一个执行搜索的图标和一个删除用户输入的文本的图标。 我的删除图标的位置有问题，它不会保留在搜索栏中，而是根据屏幕的大小向右移动。 我希望它留在搜索栏中。你知道该怎么做吗？

这段代码对我来说看起来不错，但它没有达到我想要的效果：

        <div class="col-lg-4 col-sm-4 searchbarDiv" style="margin: 0 auto; position: relative;">
            <cc1:PSTextBox runat="server" ID="edbName" AutoCompleteType="Search" MLNullKey="PANELADMINSOFTWARE_TITLE" MLToolTipKey="RQSearchTooltip" CssClass="form-control searchbar" Style="padding-left: 40px; padding-right: 40px;" />
            <span id="edbNameIcon" class="material-icons searchIcon" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%);">search</span>
            <span id="clearSearch" class="material-icons searchDelete" style="position: absolute; left: 20px; top: 50%; transform: translateY(-50%);">close</span>
        </div>

Answer 1

请包含您的 CSS 代码。还要将

position: relative;

添加到您的 div CSS 代码中。这将确保该 div 内的项目不会流到其外部。