css3 – 在twitter引导导航栏上放置徽标,而不调整导航栏的大小

前端之家收集整理的这篇文章主要介绍了css3 – 在twitter引导导航栏上放置徽标,而不调整导航栏的大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法在自举导航栏上放置图像(品牌标志),如:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <a class="brand" href="#"><img src="../Content/Images/logo.png" /></a>
    </div>
</div>
</div>

并保持导航杆高度不变?
我试过了

.navbar .brand
{
display: block;
height: 125px;
width: 246px;
padding: 0;
background: url('../Content/Images/logo.png') no-repeat left center;
float:left;
position: absolute;
}

我有很好的结果与定位,但链接过来的标志。

解决方法

the links come over the logo

这是由绝对定位引起的。

更新不调整图像大小:

.navbar .brand {
    max-height: 40px;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

Demo without resizing image (jsfiddle)

原文链接:https://www.f2er.com/css/218241.html

猜你在找的CSS相关文章