gpt4 book ai didi

html - 图像未显示在输入字段内

转载 作者:太空狗 更新时间:2023-10-29 16:06:22 24 4
gpt4 key购买 nike

我想创建一个带有输入框的导航栏。在右侧(输入字段内),我想展示一个玻璃杯。我这里有这段代码:

*{
margin: 0px;
padding: 0px;
}

body{
background-color: rgb(226, 220, 220);
}

nav{
width: 100%;
background-color: white;
}

nav > .nav_ul{
width: 1000px;
margin: 0px auto;
}

nav > .nav_ul > .nav_li{
display: inline-block;
margin: 10px 0px;
}

nav > .nav_ul > .nav_li > .nav_a{
text-decoration: none;
padding: 7px;
background-color: #5238DF;
display: block;
color: white;
}

nav > .nav_ul > .nav_search{
position: relative;
display: inline-block;
}

nav > .nav_ul > .nav_search > .nav_searchfield{
padding: 7px;
}

nav > .nav_ul > .nav_search > .fa_search{

}
<!DOCTYPE>
<html>
<head>
<link href="backbone/general.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
<nav>
<ul class="nav_ul">
<li class="nav_li"><a href="#" class="nav_a">Link 1</a></li>
<li class="nav_li"><a href="#" class="nav_a">Link 2</a></li>
<div class="nav_search">
<span class="fa fa-search"></span>
<input class="nav_searchfield" type="text" placeholder="Search ..." />
</div>
<li class="nav_li"><a href="#" class="nav_a">Link 3</a></li>
</ul>
</nav>
</body>
</html>

我对图像使用 fontawesome,但图像不显示。我做错了什么?这是一张图片:

enter image description here

最佳答案

这解决了你的问题:

nav > .nav_ul > .nav_search > .nav_searchfield{
padding: 7px 28px 7px 7px;
}

nav > .nav_ul > .nav_search > .fa-search{
position: absolute;
top: 6px;
right: 10px;
}

fiddle :https://jsfiddle.net/lmgonzalves/k433otdg/

关于html - 图像未显示在输入字段内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30693921/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com