Question

我想创建一个带有输入字段的导航栏。在右侧（在输入字段内），我想要显示一个玻璃。我在这里有这个代码：

＆＃13;

*{
	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{
	
}

＆＃13;

<!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>

＆＃13;

我使用fontawesome作为图像，但图像没有显示。我错了什么？这是一张图片：

enter image description here

Answer 1

这可以解决您的问题：

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/

Answer 2

为图标设置自定义边距。 .fa-margin { margin-left: -20px; }

* {
  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;
  margin: 0 5px;
}
nav > .nav_ul > .nav_search > .nav_searchfield {
  padding: 7px;
}
nav > .nav_ul > .nav_search > .fa_search {} .fa-margin {
  margin-left: -20px;
}

<!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">

        <input class="nav_searchfield" type="text" placeholder="Search ..."><span class="fa fa-search fa-margin"></span> 

      </div>
      <li class="nav_li"><a href="#" class="nav_a">Link 3</a>
      </li>
    </ul>
  </nav>
</body>

</html>

图像未显示在输入字段内

2 个答案: