javascript - Aligining a div to the right of another div in box(div) -


i trying align 2 divs next each other in box. using angularjs generate input boxes dynamically, want add image delete option beside each input box. have used "display : inline-block". dosen't work.

the code have till :

<div class="contentbox box effectmission" ng-repeat="mission in missions">         <div class="boxheader">           <span style="font-size: large; font-family: monospace; font-weight: bold;">edit mission name</span><input id="{{mission.id}}" type="text" ng-model="mission.missioninfo" class="form-control" style="background-color: #e8e8e8">         </div>        <div style="padding-top: 10px;">        <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">edit mission points</span><br />         </div>         <div style="padding-top: 10px;">             <ol style="float: left; width: 100%;">                 <li id="missioncontent.id" ng-repeat="missioncontent in mission.missioncontent" style="padding: 2px; width: 100%;">                     <div>                         <input id="{{missioncontent.id}}" type="text" ng-model="missioncontent.info" class="form-control" style="background-color: #e8e8e8; width: 80%;">                     </div>                     <div style="float: right; width: 20%; display: inline-block;">                         <span>v</span>                     </div>                 </li>             </ol>         </div>     </div> 

whatever have got till looks this.

enter image description here

i want input boxes , image align next each other.(in place of 'v' using image.)

place v div before <input> div in html. might need clear it, too. (display:inline-block can removed, since floated elements display:block.)

        <ol style="float: left; width: 100%;">             <li id="missioncontent.id" ng-repeat="missioncontent in mission.missioncontent" style="padding: 2px; width: 100%;">                 <div style="float:right; clear:right; width:20%;">                     <span>v</span>                 </div>                 <div>                     <input id="{{missioncontent.id}}" type="text" ng-model="missioncontent.info" class="form-control" style="background-color: #e8e8e8; width: 80%;">                 </div>             </li>         </ol> 

Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -