How to Display anchor elements Inline which are in a list element in dropdown-menu

Question

Below is my Html code

 <li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{menu.title}} <span class="caret"></span></a> <ul class="dropdown-menu"> <li ng-repeat="li in menu.subMenuList"> <a href="{{li.state}}">{{li.title}} </a> <a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a> </li> </ul> </li> 

I want the edit icon to be adjacent to F/R production Report. Not below Production Report.

PS I tried display: inline-block; display: inline; but both are not working.

Answer 1

Have you triend to simply place the tag inside the previous tag?

 <li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{menu.title}} <span class="caret"></span></a> <ul class="dropdown-menu"> <li ng-repeat="li in menu.subMenuList"> <a href="{{li.state}}">{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a> </a> </li> </ul> </li>