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.
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
Post a Comment