我想创建一个带有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>
解决方法
这解决了你的问题：
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;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
