时间戳

首页 > 解决方案 > 如何防止文本显示在搜索图标后面

html - 如何防止文本显示在搜索图标后面

问题描述

对于自学，我正在尝试建立一个搜索字段，但我正在尝试两个问题。

1.文字过长时，显示在搜索图标后面。我该如何防止这种情况？

2.为什么我添加了图标和右边框之间有一个空格right:0;

相关代码：

.search i{
position: absolute;    
top:50%;
right:0;
transform: translateY(-50%);
font-size: 35px;
color: dimgray;
background-color:green;
}


.search-container{
    display:flex;
    width:70%;
}
.search{
    width:100%;
    position:relative;
}
.search input{
    height:50px;
    padding:4px 0 4px 30px;
    font-size: 20px;
}
.search i{
    position: absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    font-size: 35px;
    color: dimgray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <div class="search-container">
            <select class="name">
                <option value="Name-1">Name-1</option>
                <option value="Name-2">Name-2</option>
                <option value="Name-3">Name-3</option>
                <option value="Name-4">Name-4</option>
                <option value="Name-5">Name-5</option>
                <option value="Name-6">Name-6</option>
                <option value="Name-7">Name-7</option>
            </select>
            <div class="search">
                <input class="search-bar search" type="text" name="search" autofocus placeholder="You can search for a name.">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </body>
</html>

标签： htmlcss

解决方案

这是您修改后的代码，我相信它可以满足您的要求。我已从search您的搜索输入中删除了一个类，因为父节点具有相同的类。

.search-container{
    display:flex;
    width:70%;
}
.search{
    width:100%;
    position:relative;
    display: flex;
    flex-direction: row;
    border: 1px solid black;
}

.search:focus-within {
  outline-width: 1px;
  outline-color: rgb(166,200,255);
  outline-style: solid;
}

.search input{
    height:50px;
    width: 90%;
    padding:4px 0 4px 30px;
    font-size: 20px;
    border: none;
    outline: none;
}

.search i{
    display: flex;
    width: 10%;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    padding: 0 .5em 0 .5em;
    color: dimgray;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
        integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    </head>
    <body>
        <div class="search-container">
            <select class="name">
                <option value="Name-1">Name-1</option>
                <option value="Name-2">Name-2</option>
                <option value="Name-3">Name-3</option>
                <option value="Name-4">Name-4</option>
                <option value="Name-5">Name-5</option>
                <option value="Name-6">Name-6</option>
                <option value="Name-7">Name-7</option>
            </select>
            <div class="search">
                <input class="search-bar" type="text" name="search" autofocus placeholder="You can search for a name.">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </body>
</html>

推荐阅读