如何使用css样式显示图像选项

Question

我有3个部分：左，中，右。在右侧菜单栏中，我正在显示图像。对于最后（移动）图像，我想保留选项。

当您将鼠标悬停在图像上时，它应显示选项。但是当我悬停图像时，选项会显示在接下来的两行中。

左下方有2行空间，所有三个部分中间部分。如何在不占空位的情况下显示选项？

这是我的代码：

<div id="mainContainer">
    <div id="leftContainer" class="mainMenu">
    </div>
    <div id="middleContainer" class="mainMenu">
    </div>
    <div id="rightContainer" class="mainMenu">
        <div>
            <i class="fa fa-trash-o fa-2x" style="color: #339AE4;"></i>            
            <div  class="imageStyle" title="Send">
                <i class="fa fa-reply fa-2x"></i>
            </div>
             <div class="imageStyle" title="SendAll">
                <i class="fa fa-reply-all fa-2x"></i>
            </div>
            <div  class="imageStyle" title="Forward">
                <i class="fa fa-reply fa-flip-horizontal fa-2x"></i>
            </div>
            <div  class="imageStyle" title="Trash">
                <i class="fa fa-trash-o fa-2x"></i>            
            </div>
            <div ng-show="emailIcon()" class="imageStyle" title="highlight">
                <i  class="fa fa-star fa-2x"></i>
             </div>
            <div  class="imageStyle" title="move" ng-mouseover="newIcon=true" ng-mouseleave="newIcon=false">
                <i class="fa fa-folder-o fa-2x"> </i> 
                <label  ng-show="newIcon">moveToSet1</label>
                <label  ng-show="newIcon">moveToSet2</label> 
            </div> 
        </div>
    </div>
</div>

这是我的css代码：

#leftContainer{
 width: 14%;
}
#middleContainer{
width:26%;
}
#rightContainer{
width:60%;
}
.mainMenu{
 margin-right: -4px;
    text-align: center;
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #339AE4;
    outline: solid 1px gray;
}
.imageStyle{
    width: 6%;
    display: inline-block;
    text-align:left;
    font-family: 'Segoe UI';
    vertical-align:top;
    color: #F2F2F2;
    cursor: pointer;
}