右边小图标怎么放上去

来源：2-7 作业题

qq_慕尼黑9165359

2019-03-07 12:43:42

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Title</title>
<link href="css/Mystyle.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<header id="box-head">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">

<a class="navbar-brand navbar-brand-1 navbar-left" href="#">IMOOC</a>
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown-first">
<a href="#" role="button" >首页</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
</ul>
</li>
</ul>
</div>

<ul class="nav navbar-nav navbar-right box-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
</a>
<div class="dropdown-menu boxone ">
<input type="text" class="textone">
<button>搜索</button>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user"></span>
</a>
<div class="dropdown-menu boxtwo">

<from>
<div >Email<br><input type="email" class="text-email"></div>
<div>Password<br><input type="password" class="text-password"></div>
<div><button>登录</button></div>
</from>
<div>
<input type="checkbox">记住
</div>
<div class="lastbox">
<ul class="list-styled list-inline">
<li>
<p>新用户？</p>
</li>
<li>
<a href="#">注册&nbsp&nbsp|</a>
</li>
<li>
<a href="#">忘记密码？</a>
</li>
</ul>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-shopping-cart"></span>
</a>
<div class="dropdown-menu boxstree">
<div>
<P>$0.00 (0)</P>
</div>
<div>
<button>空</button>
</div>
</div>
</li>
</ul>

</div>
</nav>
</div>
</header>

<script src="js/MyJs.js"></script>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

2.css

#box-head{
width: 100%;
height: 52px;
background: #5D4B33 ;
}
#box-head .navbar-default{
background: #5D4B33;
border: none;
}
#box-head .navbar-default .navbar-brand-1{
font-size: 30px;
color: white;
line-height: 26px;

}
#box-head .navbar-default .navbar-brand-1:hover{
color: #F07818;
}
#box-head .dropdown-toggle{
color: white;
border-left: 1px solid white;
}
#box-head .dropdown-toggle:hover{
background: #F07818;
}
#box-head .dropdown-first{
background: #F07818;
}
#box-head .dropdown-first a{
color: white;
}
#box-head .boxone{
width: 210px;
}
#box-head .boxone .textone{
border: 1px solid #F07818;
margin-left: 7px;
display: block;
float:left;
}
#box-head .boxone button{
background: #F07818;
height: 24px;
border: none;
color: white;
display: block;
float:left;
}
#box-head .boxtwo{
width:300px;
height: 250px;
}
#box-head .boxtwo button{
width: 250px;
height: 30px;
background: #F07818;
color: white;
border: none;
margin: 10px auto;
}
#box-head .boxtwo button:hover{
width: 250px;
height: 30px;
background: white;
color: #F07818;
border: 1px solid #F07818;
margin: 10px auto;
}
#box-head .boxtwo .text-email,
#box-head .boxtwo .text-password{
width: 250px;
height: 30px;
}
#box-head .boxtwo div{
width: 250px;
margin: 5px auto;
}
#box-head .boxtwo .lastbox{
width: 200px;
margin: 0px auto;
}
#box-head .boxstree{
width: 160px;
height: 85px;
}
#box-head .boxstree div{
width: 150px;
height: 30px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#box-head .boxstree button{
width: 140px;
height: 30px;
background: #F07818;
color: white;
border: none;
margin: 0px auto;
}
#box-head .boxstree button:hover{
width: 140px;
height: 30px;
background: white;
color: #F07818;
border: 1px solid #F07818;
margin: 0px auto;
}
#box-head .navbar-left button:hover{
background: #F07818;
}
@media (max-width: 768px) {

#box-head .box-right{

float: right;

}
#box-head .box-right .dropdown{

float: left;

}
#box-head .dropdown-toggle{
border-left:none;
}
#box-head .navbar-left button{
float: left;
}
}