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

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

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

在所有三个部分的左下、中间部分有两行空格。如何在不占用空格的情况下显示选项

这是我的密码：

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

---

请给我们一个工作的例子。真的很难看出哪里出了问题。使用类似Codepen或JSBin的代码您在这里发布的代码与您在上面发布的屏幕截图不同。一个工作样本将是一个好主意。

#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;
}