水平引导下拉列表，带有 MS 办公室栏等图像

Question

我想做一个导航栏，比如微软的办公栏。

我有这个风格

.officeColorStyle
{
    background: #A0C0D3 !important;
    color: #A0C0D3;
}
.officeColorStyleFont
{
    background: inherit !important;
    color: #0033ff;
}
.items:hover .dropdown-menu ,dropdown-item{
display: inline-block;
margin-top: 0; 
}
.items{
   display:inline-block;
}
.dropdown-menu.officeBar
{
    position: absolute;
    min-width: 700px !important;
}
.imagesOfficeBar{
   width: 35px; height: 35px;
}
.divider-vertical {
 height: 50px;
   margin: 0 0px;
   border-left: 2px solid #F2F2F2;
   border-right: 2px solid #FFF;
   width: 100px;height: 100px;
   }

这是导航栏中的代码

<div class="officeColorStyle">
        <ul>
            <div>
            <li class="dropdown items">
                    <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        DOCUMENTOS
                    </a>
                <div class="dropdown-menu officeBar officeColorStyle divider-vertical" style="position: absolute !important;">

                    <a class="dropdown-item"  href="/documentada/1">
                        <img class="imagesOfficeBar" src=" /img/navBar office style images/Politicas.jpg" />
                        <span>POLITICas</span>
                    </a>
                    <a class="dropdown-item" href="/documentada/2">
                        <i class="fa fa-book imagesOfficeBar"></i>
                        Manuales
                    </a>         
                </div>
            </li>
            </div>
        </ul>
    </div>

我需要图像出现在文本顶部，但我不知道该怎么做，因为图像出现在文本之前图像显示在文本之前

其他事情，有没有办法使用像素大小精确的引导真棒字体

多谢

Answer 1

您不能只添加一个换行符吗？

<a class="dropdown-item"  href="/documentada/1">
    <span>POLITICas</span> <br />
    <img class="imagesOfficeBar" src=" /img/navBar office style images/Politicas.jpg" />
</a>

https://jsfiddle.net/99pw3njr/- 我这里没有图像，但您可以看到图像的轮廓。这不是你的意思吗？