html – 图像不会显示在inputfield中

发布时间：2020-12-14 23:26:34 所属栏目：资源来源：网络整理

导读：我想创建一个带有inputfield的导航栏.在右侧(在输入字段内),我想要显示一个玻璃.我在这里有这个代码： *{margin: 0px;padding: 0px;}body{background-color: rgb(226,220,220);}nav{width: 100%;background-color: white;}nav .nav_ul{width: 1000px;margin:

我想创建一个带有inputfield的导航栏.在右侧(在输入字段内),我想要显示一个玻璃.我在这里有这个代码：

*{
	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作为图像,但不显示图像.我错了什么？这是一张图片：

解决方法

这解决了你的问题：

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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!