2015-06-19 93 views
4

我想對齊兩個div在一個盒子中彼此相鄰。我正在使用angularJS動態生成輸入框,我想爲每個輸入框旁邊的刪除選項添加一個圖像。我已經使用「顯示:內嵌塊」。但它不起作用。Aligining一個div在右邊的另一個格在框(div)

,我有到現在的代碼是:

<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> 

無論我有到現在看起來是這樣的。

enter image description here

+0

設置同級div來'浮動:left'太。 –

+1

[如何垂直對齊使用CSS DIV中的圖像和文本?](http://stackoverflow.com/questions/13408394/how-to-vertically-align-both-image-and-text-in -a-div-using-css) –

回答

3

放置v DIV之前要輸入框和圖像正確旁邊彼此對齊。(在地方的「V」我將要使用的圖像。) <input> div在你的HTML。你也可能需要clear。 (display:inline-block可以被移除,因爲所有浮動元素是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> 
+0

that worked ....很多方面 –