我有一个客户给了我一个 psd 切片并放入引导程序。在 pds 中,它们有导航栏的图像,而且它们的形状很奇怪,所以我用它们制作了一个精灵导航栏。用 css 重新创建它是不可能的。
我的问题是他们至少没有响应。有没有办法让它们如此,而不必每隔几个像素使用媒体查询来调整它们的大小?
我的 html
<div class="col-md-8">
<nav>
<ul>
<li><a class="about" href="#">About</a></li>
<li><a class="products" href="#">Products</a></li>
<li><a class="technology" href="#">Technology</a></li>
</ul>
</nav>
</div><!--.col-md-8-->
和我的 CSS
nav ul li{
float: left;
list-style-type:none ;
text-indent:-9999em;
}
nav ul li a{
background:url(../img/nav.png) no-repeat;
display: block;
}
.about{
background-position:0px 0px;
width:25em;
height:5em;
}
.products{
background-position:-25em 0;
width:9em;
height:5em;
}
.technology{
background-position:-34em 0;
width:13em;
height:5em;
}
我已经尝试向它们添加min-height
和min-width
,但它似乎没有任何效果。