Question

我有一个带有搜索图标的文字输入。如果文本框中的字符超出其长度，则会隐藏搜索图标。怎么能让它不要隐藏。

请参阅此Image

以下是代码 -

         <div class="mainClass">
                <input type="text" placeholder="Search names"/>
                <img src="Content/Search.png" class="imageClass"/>
            </div>
        </form>
    </body>
    </html>

    <style>
        .mainClass{
            float:right;
        }
        .imageClass{
            width:10px;
            height:10px;
            margin-left:-10%;
        }
    </style>

提前致谢。

Answer 1

在输入中添加填充权限这将为您的图标提供空间

input {
  padding-right: 20px;
}

.mainClass {
  float: right;
}

.imageClass {
  width: 10px;
  height: 10px;
  margin-left: -10%;
}

input {
  padding-right: 20px;
}

<div class="mainClass">
  <input type="text" placeholder="Search names" />
  <img src="https://placehold.it/150x150" class="imageClass" />
</div>

Answer 2

只需将它们display:inline-block;

＆＃13;

.mainClass {
    float: right;
    border:1px solid;
    padding:0 5px;
}

.mainClass>input[type=text] {
    display: inline-block;
    border: none;
    outline: none;
}

.imageClass {
    width: 10px;
    height: 10px;
    display: inline-block;
}

＆＃13;

<div class="mainClass">
    <input type="text" placeholder="Search names"/>
    <img src="https://placehold.it/50x50" class="imageClass"/>
</div>

＆＃13;

搜索文本隐藏文本输入html中的搜索图标

2 个答案: