使用css将两个图标对齐在彼此之下

Question

我有两个图标，我想在彼此之下对齐，一个位于div的顶部，另一个位于div的底部。

这是我想要实现的图像 - 所以灯泡图标在顶部对齐，圆圈/十字架与底部对齐，一个在另一个下面：

我试图让这个工作，但每次尝试都失败了。

以下是我目前所拥有的图片：

这是我的HTML代码：

<div class="controls {{ control_classes }}">
    <span id="row_{{ field.auto_id }}">{{ field }}</span>
    <span id="row_icons_{{ field.auto_id }}" style="width: 20px;">
        <i id="id_icon_{{ field.auto_id }}" class="fa fa-lightbulb-o blue_color icon_size26 verticalAlignTop"></i>
        <i id="id_icon_reset_{{ field.auto_id }}" class="fa fa-ban blue_color icon_size20 verticalAlignBottom" rel="tooltip" html="true" data-placement="top" title="{% trans 'Clear' %}"></i>
    </span>
    <span id="row_split_{{ field.auto_id }}" class="textAreaSplitContainer"></span>
</div>

这是我的CSS代码：

.form-horizontal .controls {
    margin-left: 165px;
}

.verticalAlignTop {
    vertical-align: top;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

.textAreaSplitContainer {
    background-color: #f6f6f6;
    border: 1px solid #d9d9d9;
    display: inline-block;
    height: 200px;
    max-height: 600px;
    max-width: 45%;
    min-height: 100px;
    min-width: 45%;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    resize: none;  /* container is resized by resizing the textarea */
    vertical-align: top;
}

Answer 1

给重置图标一个等于其宽度的负左边距应该可以解决问题：

[id^="id_icon_reset"] { margin-left: -20px; }

这是我能盲目帮助的。如果它不起作用，我需要在小提琴/ codepen / snippet中复制问题，并且所有CSS都适用。