在一个盒子(div)中将一个div对齐到另一个div的右侧

Question

我可以帮助您翻译。以下是翻译内容：

我正在尝试在一个框中将两个div对齐。我使用angularJS动态生成输入框，我想在每个输入框旁边添加一个删除选项的图片。我已经使用了"display: inline-block"，但它不起作用。

到目前为止，我拥有的代码是：

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

目前我所得到的看起来是这样的。

我想要让输入框和图片正确地对齐在一起。(我将使用一张图片代替'v'.)

- Vikram Singh Jadon

---

将兄弟元素的div也设置为float: left。 - Rory McCrossan

可能是重复的问题：如何使用CSS在DIV中垂直对齐图像和文本？ - Giacomo Paita

Answer 1

在你的HTML中，将v div放在<input> div之前。你可能需要清除它，(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>

- Blazemonger