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>

我需要将图像显示在文本的顶部，但我不知道这是怎么做的，因为图像出现在文本之前 image appears before text

另外，有没有办法使用像素精确大小的bootstrap真棒字体

非常感谢

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/ - 我这里没有图像，但你可以看到图像的轮廓。这不是你的意思吗？

水平引导下拉列表，带有MS office bar

1 个答案: